@charset "utf-8";

/*****************************************
toppage.css
トップページのみで使うスタイル
******************************************/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body#pagetop,
body,
#header {
  font-size: 16px;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
}

#headContent {
  margin-bottom: 50px;
}

#main .space {
  padding-bottom: 50px;
}

#areaLink div.area {
  max-width: 1280px;
}

img {
  width: auto;
  max-width: 100%;
  height: auto;
}

*:focus:not(:focus-visible):not(a[href]):not(area[href]):not(button):not(input):not(select):not(textarea):not(summary):not(iframe):not(audio[controls]):not(video[controls]) {
  outline: none;
}

[tabindex="-1"]:focus,
div[tabindex]:focus,
:is(section, article, div)[id][tabindex]:focus,
:is(h1, h2, h3, h4, h5, h6)[tabindex]:focus {
  outline: none;
}

button {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: inherit;
  cursor: pointer;
}

a,
a:link,
a:visited,
a:hover,
a:active {
  color: inherit;
  text-decoration: none;
}

html.fixed {
  overflow: hidden;
  width: 100%;
  height: 100%;
  scrollbar-gutter: stable;
}

#main .content {
  max-width: 100%;
}

/* gnav共通のオーバーレイ(js側initGnavから利用) */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  background-color: rgba(0, 0, 0, 0.4);
}

.overlay[hidden] {
  display: none;
}

/* =================================================================
  common : custom properties
================================================================= */
:root {
  --color-white: #ffffff;
  --color-primary: #223d71;
  --color-accent: #b9023c;
  --color-text: #333333;
  --color-bg-warm: #fff3e3;
  --color-bg-yellow: #f9e285;
  --color-mint: #00c48d;
  --color-mint-dark: #14332d;

  --color-primary_hover: #4A73C2;
  --color-accent_hover: #DA4776;

  --transition: 0.3s;
  --opacity: 0.7;

  --inner-width: 1160px;

  --color-tag-yellow: #f9e285;
  --color-tag-mint: #b7f1d4;
  --color-tag-pink: #ffcbd6;
  --color-ribbon: #ffc0cd;

  --font-en: "Albert Sans", sans-serif;
}

/* =================================================================
  common : section layout
================================================================= */
.l-section {
  padding: 80px 0;
}

@media (max-width: 767px) {
  .l-section {
    padding: 50px 0;
  }
}

.l-sec_inner {
  max-width: var(--inner-width);
  margin: 0 auto;
  padding: 0 20px;
}

.l-sec_heading {
  margin-bottom: 40px;
  text-align: center;
}

@media (max-width: 767px) {
  .l-sec_heading {
    margin-bottom: 28px;
  }
}

.l-sec_heading-en {
  display: block;
  margin-bottom: 4px;
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
}

.l-sec_heading-title {
  display: inline-block;
  padding-bottom: 10px;
  border-bottom: 3px dashed var(--color-accent);
  color: var(--color-text);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .l-sec_heading-title {
    font-size: 34px;
  }
}

.l-sec_lead {
  margin-bottom: 28px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
}

@media screen and (min-width: 768px) {
  .l-sec_lead {
    margin-bottom: 40px;
    text-align: center;
  }
}

/* =================================================================
  common : button(c-btn)
================================================================= */
a.c-btn,
button.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 300px;
  min-height: 60px;
  font-size: 20px;
  padding: 8px 22px;
  border: 0;
  border-radius: 999em;
  background-color: var(--color-accent);
  color: var(--color-white);
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {

  a.c-btn:hover,
  button.c-btn:hover {
    background-color: var(--color-accent_hover);
  }
}

a.c-btn span,
button.c-btn span {
  color: inherit;
}

.c-btn_icon::before {
  content: "\E907";
  font-family: recop-iconfonts;
  font-size: 20px;
  font-weight: normal;
}

/* =================================================================
  common : wave
================================================================= */
.c-wave {
  position: relative;
  z-index: 2;
  height: 30px;
  background-repeat: repeat-x;
  background-size: 375px 30px;
}

.c-wave.is-top {
  background-position: left top 1px;
}

.c-wave.is-bottom {
  background-position: left top -1px;
}

@media (min-width: 768px) {
  .c-wave {
    height: 100px;
    background-size: 1280px 100px;
  }
}

/* =================================================================
  header / gnav
================================================================= */
@font-face {
  font-family: recop-iconfonts;
  src:
    url("/jobfind-pc/original/css/option/font/recop-iconfont.eot?") format("eot"),
    url("/jobfind-pc/original/css/option/font/recop-iconfont.woff") format("woff"),
    url("/jobfind-pc/original/css/option/font/recop-iconfont.ttf") format("truetype");
  font-display: swap;
}

/* ヘッダー:画面上部に固定表示(common.cssの#header .content{width:780px}を解除) */
#header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;
  padding-top: 10px;
}

#header .content {
  width: 100%;
}

header #h_wrapper {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.head-logo {
  display: flex;
  align-items: center;
}

.head-logo .logo {
  max-width: 65px;
  padding: 0;
  transition: var(--transition);
}

@media screen and (max-width: 1170px) {
  .head-logo .logo {
    max-width: 55px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .head-logo a:hover .logo {
    opacity: var(--opacity);
  }
}

.header-inner {
  position: relative;
  max-width: 1260px;
  width: calc(100% - 20px);
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 999em;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  z-index: 100;
}

@media screen and (max-width: 1170px) {
  .header-inner {
    display: block;
    max-width: calc(100% - 20px);
    padding: 0;
    border-radius: 50px;
  }

  #header.opened .header-inner {
    border-radius: 20px;
    background-color: rgba(255, 255, 255, 1);
  }

  .header-inner_box {
    min-height: 70px;
  }

  .head-logo {
    position: absolute;
    left: 20px;
    top: 35px;
    transform: translateY(-50%);
  }
}

.gnav {
  display: flex;
  align-items: center;
  gap: 24px;
}

@media (max-width: 1170px) {
  .entry-link-wrap {
    position: absolute;
    right: 10px;
    top: 35px;
    transform: translate(calc(-50% + 22.5px), -50%);
  }
}

a.entry-link {
  min-width: 200px;
  padding: 0 22px;
  font-size: 18px;
  border: 2px solid var(--color-accent);
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  a.entry-link:hover {
    opacity: 1;
    color: var(--color-accent);
    background-color: #fff;
  }
}

@media (max-width: 1170px) {
  a.entry-link {
    min-width: 160px;
    min-height: 50px;
    padding: 0 15px;
    font-size: 15px;
    text-align: left;
  }
}

.gnav-triggerWrap {
  position: relative;
  z-index: 101;
  display: none;
}

@media (max-width: 1170px) {
  .gnav-triggerWrap {
    display: block;
    position: absolute;
    top: 38px;
    right: 18px;
    transform: translateY(-50%);
  }
}

.gnav-trigger {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 40px;
}

.hamburger-line {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 30px;
}

.hamburger-line .line {
  display: block;
  width: 100%;
  height: 3px;
  border-radius: 999em;
  background-color: var(--color-primary);
  transition: transform var(--transition), opacity var(--transition);
}

.gnav-trigger_text {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
}

#header.opened .gnav-trigger_text {
  display: none;
}

.gnav-trigger[aria-expanded="true"] .line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.gnav-trigger[aria-expanded="true"] .line:nth-child(2) {
  opacity: 0;
}

.gnav-trigger[aria-expanded="true"] .line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* PC:常時表示のインラインメニュー */
.gnav-content {
  display: none;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 40px;
}

@media screen and (max-width: 860px) {
  .nav-list {
    gap: 20px;
  }
}

.nav-item {
  position: relative;
}

a.nav-link,
.nav-link {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-primary);
  transition: var(--transition);
}

.nav-toggle_arrow {
  display: block;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  transform: rotate(45deg);
  transition: transform var(--transition);
  margin-top: -4px;
}

.js-navAccordion_trigger[aria-expanded="true"] .nav-toggle_arrow {
  transform: rotate(225deg);
  margin-top: 4px;
}

.js-navAccordion_trigger[aria-expanded="true"] {
  color: var(--color-accent);
}

.js-navAccordion_trigger[aria-expanded="true"] .nav-toggle_arrow {
  border-color: var(--color-accent);
}

@media (any-hover: hover) {

  a.nav-link:hover,
  .nav-link:hover,
  a.nav-link:hover .nav-toggle_arrow,
  .nav-link:hover .nav-toggle_arrow,
  a.nav-link:hover::before {
    color: var(--color-accent);
    border-color: var(--color-accent);
  }
}

.subnav {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.subnav a,
.subnav button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text);
  transition: var(--transition);
}

.subnav a::before,
.subnav button::before {
  content: "";
  display: block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-right: 2px solid var(--color-text);
  border-bottom: 2px solid var(--color-text);
  transform: rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {

  .subnav a:hover,
  .subnav button:hover {
    color: var(--color-accent);
  }

  .subnav a:hover::before,
  .subnav button:hover::before {
    border-color: var(--color-accent);
  }
}

@media (min-width: 1171px) {
  .gnav-content[aria-hidden] {
    display: block;
  }

  .subnav {
    min-width: 220px;
    gap: 20px;
    margin-top: 8px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    position: absolute;
  }
}

/* SP:ロゴ・ボタン・ハンバーガーは表示したまま、ヘッダー直下にメニューを展開 */
@media (max-width: 1170px) {
  .gnav-content {
    top: 100%;
    left: 0;
    right: 0;
    z-index: 100;
    width: 100%;
    max-height: calc(100dvh - 100px);
    padding: 0 20px 20px;
    overflow-y: auto;
  }

  .gnav-content[aria-hidden="false"] {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    gap: 0;
  }

  .nav-link {
    display: block;
    padding: 15px 0;
    border-top: 1px solid #ccc;
    position: relative;
  }

  a.nav-link::before {
    content: "";
    display: block;
    position: absolute;
    right: 10px;
    top: 25px;
    width: 11px;
    height: 11px;
    border-right: 2px solid var(--color-primary);
    border-bottom: 2px solid var(--color-primary);
    transform: rotate(-45deg);
  }

  .nav-toggle_arrow {
    position: absolute;
    right: 10px;
    top: 25px;
    margin-top: 0;
  }

  .subnav {
    background-color: #ffe7ec;
    border-radius: 10px;
    margin-bottom: 10px;
    padding: 10px 20px;
  }
}

/* =================================================================
  footer:pagetop
================================================================= */
.pagetop_btnWrap {
  min-height: 90px;
}

.pagetop_btn {
  text-align: right;
  position: relative;
  padding: 10px;
}

.pagetop_btn a {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 70px;
  height: 70px;
  margin: auto;
  border-radius: 50%;
  background-color: var(--color-primary);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  color: var(--color-white) !important;
  font-family: var(--font-en);
  font-size: 20px;
  font-weight: 700;
  transition: var(--transition);
}

.pagetop_btn a::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(225deg);
  margin-top: 4px;
}

@media (hover: hover) and (pointer: fine) {
  .pagetop_btn a:hover {
    background-color: var(--color-accent);
  }
}

/* スクロール中は右端に固定表示し、フッター内の本来の位置まで来たら固定を解除する */
.pagetop_btn.is-fixed {
  position: fixed;
  z-index: 99;
  margin: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s, visibility 0.3s;
}

/* ページ最上部にいる間はふわっと非表示にする */
.pagetop_btn.is-fixed.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* =================================================================
  kv
================================================================= */
.kv_wrap {
  overflow: hidden;
}

.kv {
  position: relative;
  overflow: hidden;
  padding: 100px 0 0;
}

/* kv下半分の背景(上辺を半円状にカーブさせる) */
.kv_bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 50%;
  background-color: var(--color-bg-warm);
  border-radius: 50% 50% 0 0 / 40px 40px 0 0;
}

@media (min-width: 768px) {
  .kv_bg {
    border-radius: 50% 50% 0 0 / 60px 60px 0 0;
  }
}

/* 装飾円(Figmaのst_pink/st_mintを斜線パターンで再現) */
.kv_deco {
  list-style: none;
}

.kv_deco-item {
  position: absolute;
  border-radius: 50%;
  background-image: repeating-linear-gradient(45deg, var(--deco-color) 0 4px, transparent 4px 9px);
}

.kv_deco-item-01 {
  --deco-color: var(--color-tag-mint);
  top: 15%;
  left: 10px;
  width: 70px;
  height: 70px;
}

.kv_deco-item-02 {
  --deco-color: var(--color-tag-pink);
  top: 7%;
  right: -30px;
  width: 150px;
  height: 150px;
}

.kv_deco-item-03 {
  --deco-color: var(--color-tag-pink);
  bottom: 130px;
  left: -60px;
  width: 190px;
  height: 190px;
}

.kv_deco-item-04 {
  --deco-color: var(--color-tag-pink);
  top: 44%;
  right: -20px;
  width: 60px;
  height: 60px;
  z-index: 2;
}

.kv_deco-item-05 {
  --deco-color: var(--color-tag-mint);
  bottom: 110px;
  right: 10px;
  width: 83px;
  height: 83px;
}

@media (min-width: 768px) {
  .kv_deco-item-02 {
    --deco-color: var(--color-tag-mint);
  }

  .kv_deco-item-05 {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1279px) {
  .kv_deco-item-01 {
    top: 10%;
    left: 1.5625vw;
    width: 11.71875vw;
    height: 11.71875vw;
  }

  .kv_deco-item-02 {
    top: 5.46875vw;
    right: 3.125vw;
    width: 19.53125vw;
    height: 19.53125vw;
  }

  .kv_deco-item-03 {
    bottom: 0;
    left: -4.6875vw;
    width: 23.4375vw;
    height: 23.4375vw;
  }

  .kv_deco-item-04 {
    top: 45%;
    right: 2%;
    width: 7.8125vw;
    height: 7.8125vw;
  }
}

@media (min-width: 1280px) {
  .kv_deco-item-01 {
    top: 10%;
    left: 20px;
    width: 150px;
    height: 150px;
  }

  .kv_deco-item-02 {
    top: 70px;
    right: 40px;
    width: 250px;
    height: 250px;
  }

  .kv_deco-item-03 {
    bottom: 0;
    left: -60px;
    width: 300px;
    height: 300px;
  }

  .kv_deco-item-04 {
    top: 45%;
    right: 2%;
    width: 100px;
    height: 100px;
    z-index: 2;
  }
}

.kv_inner {
  padding: 0;
  position: relative;
  z-index: 1;
}

.kv_slider {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 16px;
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 10px;
}

.kv_slider-controls {
  position: relative;
  width: 100%;
  z-index: 2;
  /* HTML上はスライドの直前に配置しつつ、order指定で見た目はスライダー下部に固定する */
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

@media (min-width: 768px) {
  .kv_slider-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    gap: 7px;
  }
}

.kv_slider-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 355 / 300;
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 768px) {
  .kv_slider-viewport {
    aspect-ratio: 1150 / 550;
    border-radius: 24px;
  }
}

.kv_slider-track {
  position: relative;
  width: 100%;
  height: 100%;
  list-style: none;
  touch-action: pan-y;
  user-select: none;
}

.kv_slider-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.kv_slider-slide[aria-hidden="false"] {
  z-index: 1;
  opacity: 1;
}

.kv_slider-slide img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  -webkit-user-drag: none;
}

.kv_catch {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.6vw;
  width: 100%;
  margin: -19.2vw 4.2667vw 0;
}

@media (min-width: 768px) {
  .kv_catch {
    position: absolute;
    left: 15px;
    bottom: 10%;
    z-index: 1;
    width: auto;
    max-width: calc(100% - 32px);
    margin: 0;
    gap: 15px;
  }
}

.kv_catch-sub span,
.kv_catch-main span {
  display: inline-block;
  padding: 1.3333vw;
  border-radius: 5px;
  background-color: var(--color-white);
  box-shadow: 0 0 2.5px rgba(0, 0, 0, 0.25);
  font-weight: 700;
  line-height: 1.5;
}

.kv_catch-sub span {
  color: var(--color-text);
  font-size: 4vw;
}

.kv_catch-main span {
  color: var(--color-primary);
  font-size: 5.4vw;
}

@media (min-width: 768px) {

  .kv_catch-sub span,
  .kv_catch-main span {
    padding: 5px;
  }

  .kv_catch-sub span {
    font-size: 18px;
  }

  .kv_catch-main span {
    font-size: 36px;
  }
}

@media (min-width: 768px) and (max-width: 1150px) {
  .kv_catch {
    left: 1.3043vw;
    max-width: calc(100% - 2.7826vw);
    gap: 1.3043vw;
  }

  .kv_catch-sub span {
    font-size: 1.5652vw;
  }

  .kv_catch-main span {
    font-size: 3.1304vw;
  }
}

.kv_slider-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style: none;
}

@media screen and (min-width: 768px){
  .kv_slider-pagination {
    gap: 7px;
  }
}

.kv_slider-pagination li {
  display: flex;
}

.kv_slider-pagination button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-mint);
  transition: background-color var(--transition);
}

@media screen and (max-width: 768px) {
  .kv_slider-pagination button {
    width: 16px;
    height: 16px;
  }
}

.kv_slider-pagination button[aria-selected="true"] {
  background-color: var(--color-mint-dark);
}

.kv_slider-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-mint-dark);
  transition: var(--transition);
}

@media screen and (max-width: 767px) {
  .kv_slider-toggle {
    width: 22px;
    height: 22px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .kv_slider-toggle:hover {
    background-color: var(--color-accent);
  }
}

.kv_slider-toggle_icon {
  position: relative;
  width: 8px;
  height: 8px;
}

.kv_slider-toggle_icon::before,
.kv_slider-toggle_icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 8px;
  background-color: var(--color-white);
}

.kv_slider-toggle_icon::before {
  left: 1px;
}

.kv_slider-toggle_icon::after {
  left: 5px;
}

/* 一時停止中(aria-pressed=true)は再生アイコン(三角)に切り替える */
.kv_slider-toggle[aria-pressed="true"] {
  background-color: var(--color-accent);
}

.kv_slider-toggle[aria-pressed="true"] .kv_slider-toggle_icon::before,
.kv_slider-toggle[aria-pressed="true"] .kv_slider-toggle_icon::after {
  content: none;
}

.kv_slider-toggle[aria-pressed="true"] .kv_slider-toggle_icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  left: 1px;
  border-color: transparent transparent transparent var(--color-white);
}

.kv_lead {
  margin-top: 16px;
  padding: 0 10px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: normal;
  text-align: center;
}

/* =================================================================
  message
================================================================= */
.message {
  padding-top: 40px;
  padding-bottom: 0;
  position: relative;
  overflow: hidden;
  background-color: var(--color-bg-warm);
}

@media screen and (max-width: 1023px) {
  .message {
    padding-bottom: 5%;
  }
}

.message_inner {
  max-width: 1320px;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "content"
    "photo-left"
    "photo-right";
  row-gap: 32px;
  align-items: center;
}

@media (min-width: 1024px) {
  .message_inner {
    grid-template-columns: 1fr minmax(auto, 640px) 1fr;
    grid-template-areas: "photo-left content photo-right";
    column-gap: 24px;
    row-gap: 0;
  }
}

.message_photos {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  list-style: none;
}

.message_photos-left {
  grid-area: photo-left;
}

.message_photos-right {
  grid-area: photo-right;
}

/* 装飾円(Figmaのst_pink/st_mintのストライプ柄をCSSで代替) */
.message_photos-left::before,
.message_photos-left::after,
.message_photos-right::before,
.message_photos-right::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.message_photos-left::before {
  top: -6px;
  left: -30px;
  width: 110px;
  height: 110px;
  background-image: repeating-linear-gradient(45deg, var(--color-tag-mint) 0 6px, transparent 6px 12px);
}

.message_photos-left::after {
  bottom: 6px;
  left: -22px;
  width: 75px;
  height: 75px;
  background-image: repeating-linear-gradient(45deg, var(--color-tag-pink) 0 5px, transparent 5px 10px);
}

.message_photos-right::before {
  top: -6px;
  right: -30px;
  width: 80px;
  height: 80px;
  background-image: repeating-linear-gradient(45deg, var(--color-tag-pink) 0 5px, transparent 5px 10px);
}

.message_photos-right::after {
  top: 95px;
  right: -28px;
  width: 110px;
  height: 110px;
  background-image: repeating-linear-gradient(45deg, var(--color-tag-mint) 0 6px, transparent 6px 12px);
}

@media (min-width: 1024px) {
  .message_photos {
    flex-direction: column;
    align-items: center;
    gap: 24px;
  }

  .message_photos-left::before {
    top: -10px;
    left: -60px;
    width: 270px;
    height: 270px;
  }

  .message_photos-left::after {
    bottom: 10px;
    left: 45px;
    width: 180px;
    height: 180px;
  }

  .message_photos-right::before {
    top: -40px;
    right: 10px;
    width: 190px;
    height: 190px;
  }

  .message_photos-right::after {
    top: 220px;
    right: -95px;
    width: 270px;
    height: 270px;
  }
}

.message_photo {
  margin: auto;
  position: relative;
  z-index: 1;
}

.message_photo img {
  display: block;
  width: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}

/*left*/
.message_photos-left .message_photo-top {
  margin-right: 0;
  width: 160px;
  height: 160px;
}

.message_photos-left .message_photo-center {
  margin-left: 0;
  width: 230px;
  height: 230px;
}

.message_photos-left .message_photo-bottom {
  margin-right: 0;
  width: 120px;
  height: 120px;
  right: -15px;
}

/*right*/
.message_photos-right .message_photo-top {
  margin-left: 0;
  width: 230px;
  height: 230px;
}

.message_photos-right .message_photo-center {
  margin-right: 0;
  width: 120px;
  height: 120px;
}

.message_photos-right .message_photo-bottom {
  margin-left: 0;
  width: 160px;
  height: 160px;
  left: -15px;
}

.message_content {
  grid-area: content;
}

.message_heading {
  margin-bottom: 30px;
}

@media screen and (min-width: 768px) {
  .message_heading {
    margin-bottom: 52px;
  }
}

.message_text {
  margin-bottom: 32px;
  color: var(--color-text);
}

@media (min-width: 768px) {
  .message_text {
    margin-bottom: 50px;
  }
}

.message_btn {
  display: flex;
  justify-content: center;
}

/* SP:写真一覧(Figma node 2006-2947)に合わせて絶対配置の集合レイアウトにする */
@media (max-width: 1023px) {
  .message_inner {
    grid-template-areas:
      "content"
      "photos";
  }

  .message_photos-left,
  .message_photos-right {
    grid-area: photos;
    display: block;
    width: 100%;
    max-width: 768px;
    aspect-ratio: 410 / 389;
    margin: 0 auto;
  }

  .message_photos-left::before {
    top: 1.4%;
    left: 16.9%;
    width: 39.4%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .message_photos-left::after {
    top: 48.9%;
    left: 36.6%;
    bottom: auto;
    width: 53.5%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .message_photos-right::before {
    top: 3.5%;
    left: 63.4%;
    right: auto;
    width: 22.5%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .message_photos-right::after {
    top: 42%;
    left: 84.5%;
    right: auto;
    width: 22.5%;
    aspect-ratio: 1 / 1;
    height: auto;
  }

  .message_photo {
    position: absolute;
    margin: 0;
    width: auto;
    height: auto;
    aspect-ratio: 1 / 1;
  }

  .message_photos-left .message_photo-top {
    left: 66.2%;
    top: 5.7%;
    width: 33.8%;
  }

  .message_photos-left .message_photo-center {
    left: 2.8%;
    top: 10.8%;
    width: 47.9%;
  }

  .message_photos-left .message_photo-bottom {
    left: 46.5%;
    top: 0;
    right: auto;
    width: 19.7%;
  }

  .message_photos-right .message_photo-top {
    left: 49.3%;
    top: 42%;
    width: 47.9%;
  }

  .message_photos-right .message_photo-center {
    left: 33.8%;
    top: 81%;
    right: auto;
    width: 19.7%;
  }

  .message_photos-right .message_photo-bottom {
    left: 0;
    top: 61%;
    width: 33.8%;
    position: relative;
  }

  .message_photos-right .message_photo-bottom::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: -16px;
    left: -40px;
    width: 80px;
    height: 80px;
    background-image: repeating-linear-gradient(45deg, var(--color-tag-pink) 0 6px, transparent 6px 12px);
    z-index: -1;
  }
}

.message_bg {
  padding-bottom: 6.5vw;
  position: relative;
}

@media screen and (min-width: 768px) {
  .message_bg {
    margin-bottom: 80px;
  }
}

.message_bg::before {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  height: 6.35vw;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center top;
  transform: translateX(-50%);
  top: 0;
  background-image: url("/jobfind-pc/original/images/bg_curve_bottom_beige.svg");
}


.message_bg .l-sec_inner {
  position: relative;
}

@media screen and (min-width: 768px) {
  .message_bg .l-sec_inner::before {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: -25px;
    left: -150px;
    width: 150px;
    height: 150px;
    background-image: repeating-linear-gradient(45deg, var(--color-tag-mint) 0 6px, transparent 6px 12px);
  }

  .message_bg .l-sec_inner::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    top: -25px;
    right: -150px;
    width: 170px;
    height: 170px;
    background-image: repeating-linear-gradient(45deg, var(--color-tag-pink) 0 6px, transparent 6px 12px);
  }
}

/* =================================================================
  work
================================================================= */
@media screen and (min-width: 768px) {
  .work {
    padding-top: 20px;
  }
}

.work_heading {
  margin-bottom: 24px;
}

/* -----------------------------------------------------------------
  work : job card
----------------------------------------------------------------- */
.work_jobList {
  display: grid;
  grid-template-columns: 1fr;
  padding-bottom: 10px;
  gap: 24px;
  list-style: none;
}

@media (min-width: 768px) {
  .work_jobList {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: 20px;
  }
}

.work_job-trigger {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  text-align: left;
  transition: var(--transition);
}

@media (min-width: 768px) {
  .work_job-trigger {
    flex-direction: row;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  }
}

@media (any-hover: hover) {
  .work_job-trigger:hover {
    opacity: var(--opacity);
  }
}

.work_job-image {
  flex-shrink: 0;
}

.work_job-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 335 / 177;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}

@media (min-width: 768px) {
  .work_job-image {
    width: 33.333%;
  }

  .work_job-image img {
    aspect-ratio: 180 / 404;
    border-radius: 20px 0 0 20px;
  }
}

.work_job-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  padding: 20px;
}

@media (min-width: 768px) {
  .work_job-content {
    justify-content: space-between;
    padding: 30px 20px 10px;
  }
}

.work_job-heading {
  position: relative;
  margin-bottom: 15px;
  padding-left: 18px;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}

.work_job-heading_bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  border-radius: 2px;
  background-color: var(--color-tag-pink);
}

.work_job-text {
  margin-bottom: 20px;
  color: var(--color-text);
  line-height: 1.7;
}

.work_job-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 30px;
  list-style: none;
}

.work_job-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 24px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

.work_job-tag_yellow {
  background-color: var(--color-tag-yellow);
}

.work_job-tag_mint {
  background-color: var(--color-tag-mint);
}

.work_job-tag_pink {
  background-color: var(--color-tag-pink);
}

.work_job-more {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
}

.work_job-more_arrow:before {
  display: block;
  content: "\E885";
  font-family: recop-iconfonts;
  color: var(--color-accent);
  font-size: 24px;
  position: relative;
  right: 10px;
}

@media screen and (max-width: 767px) {
  .work_job-more_arrow:before {
    right: 0;
  }
}

/* -----------------------------------------------------------------
  work : product(こんな商品を担当します)
----------------------------------------------------------------- */
.work {
  padding-bottom: 0;
}

.work_product {
  position: relative;
  padding: 70px 20px 56px;
  background: linear-gradient(to bottom,
      #fff 0%,
      #fff 40%,
      var(--color-bg-yellow) 40%,
      var(--color-bg-yellow) 100%);
}

@media screen and (max-width: 767px) {
  .work_product {
    position: relative;
    padding: 42px 0;
    background: linear-gradient(to bottom,
        #fff 0%,
        #fff 20%,
        var(--color-bg-yellow) 20%,
        var(--color-bg-yellow) 100%);
  }
}

.work_product::before,
.work_product::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  height: 6.35vw;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center bottom;
  transform: translateX(-50%);
}

.work_product::before {
  top: calc((40% - 6.35vw) + 1px);
  background-image: url("/jobfind-pc/original/images/bg_curve_top_yellow.svg");
}

@media screen and (max-width: 767px) {
  .work_product::before {
    top: calc((20% - 6.35vw) + 1px);
  }
}

.work_product::after {
  bottom: -1px;
  background-image: url("/jobfind-pc/original/images/bg_curve_bottom_white.svg");
}

.work_product-inner {
  position: relative;
  z-index: 1;
  max-width: var(--inner-width);
  margin: 0 auto;
  padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .work_product-inner {
    padding-bottom: 40px;
  }
}

.work_product-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
  color: var(--color-primary);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 768px) {
  .work_product-heading {
    margin-bottom: 75px;
    font-size: 26px;
  }
}

.work_product-heading_deco {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.work_product-heading_deco::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 35px;
  background: url("/jobfind-pc/original/images/icon_slash.png") no-repeat center/contain;
}

.work_product-heading_deco:last-child {
  transform: scale(-1, 1);
}

@media (min-width: 768px) {
  .work_product-heading_deco::before {
    width: 39px;
    height: 45px;
  }
}

.work_product-slider {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

@media screen and (min-width: 768px) {
  .work_product-slider {
    margin-bottom: 40px;
  }
}

.work_product-viewport {
  width: 100%;
  overflow: hidden;
}

.work_product-controls {
  position: relative;
  width: 100%;
  margin-top: 16px;
  /* HTML上はスライドの直前に配置しつつ、order指定で見た目はスライダー下部に固定する */
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.work_product-track {
  display: flex;
  list-style: none;
  transition: transform 0.5s ease;
  touch-action: pan-y;
  user-select: none;
}

.work_product-slide {
  display: flex;
  flex: 0 0 100%;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding-bottom: 10px;
}

.work_product-image {
  width: 100%;
  max-width: 350px;
}

.work_product-balloon {
  position: relative;
  width: 100%;
  max-width: 300px;
  padding: 20px;
  background-color: var(--color-white);
  border-radius: 30px;
  text-align: center;
}

.work_product-balloon::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent var(--color-white) transparent;
  transform: translateX(-50%);
}

.work_product-balloon_title {
  margin-bottom: 8px;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
}

.work_product-balloon_text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
  text-align: left;
}

.work_product-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  list-style: none;
}

.work_product-pagination>li {
  display: flex;
}

.work_product-pagination button {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: var(--color-mint);
  transition: background-color var(--transition);
}

.work_product-pagination button[aria-selected="true"] {
  background-color: var(--color-mint-dark);
}

.work_product-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--color-mint-dark);
  transition: var(--transition);
}

.work_product-toggle_icon {
  position: relative;
  width: 10px;
  height: 10px;
}

.work_product-toggle_icon::before,
.work_product-toggle_icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 10px;
  background-color: var(--color-white);
}

.work_product-toggle_icon::before {
  left: 2px;
}

.work_product-toggle_icon::after {
  left: 6px;
}

/* 一時停止中(aria-pressed=true)は再生アイコン(三角)に切り替える */
.work_product-toggle[aria-pressed="true"] {
  background-color: var(--color-accent);
}

.work_product-toggle[aria-pressed="true"] .work_product-toggle_icon::before,
.work_product-toggle[aria-pressed="true"] .work_product-toggle_icon::after {
  content: none;
}

.work_product-toggle[aria-pressed="true"] .work_product-toggle_icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  left: 1px;
  border-color: transparent transparent transparent var(--color-white);
}

@media (min-width: 768px) {

  /* PCでは3商品を並べた静止レイアウトにする(toggle/paginationはJS側でも無効化) */
  .work_product-slider {
    display: block;
    margin-bottom: 48px;
  }

  .work_product-viewport {
    overflow: visible;
  }

  .work_product-track {
    flex-wrap: nowrap;
    justify-content: center;
    gap: 24px;
  }

  .work_product-slide {
    flex: 0 0 calc((100% - 48px) / 3);
    width: calc((100% - 48px) / 3);
  }

  .work_product-slide:nth-child(2) {
    transform: translateY(-30px);
  }

  .work_product-controls {
    display: none;
  }
}

.work_product-note {
  margin-bottom: 24px;
  color: var(--color-text);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.7;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .work_product-note {
    text-align: left;
  }
}

.work_product-link {
  max-width: 500px;
  margin: auto;
  margin-bottom: 50px;
  padding: 0 10px;
  text-align: center;
}

.work_product-link a {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding-left: 8px;
  padding-bottom: 8px;
  justify-content: space-between;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-text);
  font-size: 20px;
  text-align: left;
  font-weight: 700;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .work_product-link a:hover {
    color: var(--color-accent);
  }
}

.work_product-link_arrow:before {
  display: block;
  content: "\E886";
  font-family: recop-iconfonts;
  color: var(--color-accent);
  font-size: 24px;
  margin-right: 10px;
  position: relative;
  top: 5px;
}

.work_product-btn {
  display: flex;
  justify-content: center;
}

/* -----------------------------------------------------------------
  work : modal(サンプル準拠。本文は仮テキスト)
----------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

@media screen and (max-width: 767px) {
  .modal {
    align-items: flex-end;
    padding: 50px 0 0;
  }
}

.modal[hidden] {
  display: none;
}

/* is-activeはJSでモーダル表示時に付与(ふわっとフェードイン) */
.modal.is-active {
  opacity: 1;
}

.modal_container {
  position: relative;
  width: min(100%, 1000px);
  max-height: calc(100dvh - 80px);
  background-color: var(--color-white);
  transform: scale(0.96);
  transition: transform 0.3s ease;
  overflow: hidden;
  border-radius: 20px;
}

.modal.is-active .modal_container {
  transform: scale(1);
}

@media screen and (max-width: 767px) {
  .modal_container {
    max-height: calc(100dvh - 50px);
    transform: translateY(100%);
    transition: transform 0.35s ease;
    border-radius: 30px 30px 0 0;
  }

  /* SPのみ画面下からスライドイン。is-activeはJSでモーダル表示時に付与 */
  .modal.is-active .modal_container {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {

  .modal,
  .modal_container {
    transition: none;
  }
}

.modal_body {
  max-height: calc(100dvh - 50px);
  overflow-y: auto;
}

@media screen and (min-width: 768px) {
  .modal_body {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .modal_body::-webkit-scrollbar {
    display: none;
  }
}

.modal_close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 2px solid var(--color-white);
  z-index: 10;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .modal_close:hover {
    border-color: var(--color-primary);
  }
}

.modal_close::before,
.modal_close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background-color: var(--color-primary);
}

.modal_close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.modal_close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* -----------------------------------------------------------------
  work : modal本文(work_job-triggerで開く.modal_containerの内容)
----------------------------------------------------------------- */
.work_modal {
  display: flex;
  flex-direction: column;
}

.work_modal-head {
  position: relative;
  flex-shrink: 0;
  padding: 20px 60px;
  background-color: var(--color-tag-yellow);
  text-align: center;
}

.work_modal-head_title {
  color: var(--color-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .work_modal-head_title {
    font-size: 26px;
  }
}

.work_modal-close {
  position: absolute;
  top: 50%;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--color-white);
  background-color: var(--color-white);
  transform: translateY(-50%);
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .work_modal-close:hover {
    border-color: var(--color-text);
  }
}

.work_modal-close::before,
.work_modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background-color: var(--color-text);
}

.work_modal-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.work_modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.work_modal-body {
  flex: 1;
  min-height: 0;
  padding: 20px;
  overflow-y: auto;
}

@media (min-width: 768px) {
  .work_modal-body {
    padding: 40px;
  }
}

.work_modal-section {
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .work_modal-section {
    margin-bottom: 40px;
  }
}

/* 仕事内容(見出しは.work_job-heading/.work_job-heading_barを再利用) */
.work_modal-job {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (min-width: 768px) {
  .work_modal-job {
    flex-direction: row;
    gap: 30px;
  }
}

.work_modal-job_image {
  flex-shrink: 0;
}

.work_modal-job_image img {
  display: block;
  width: 100%;
  aspect-ratio: 335 / 224;
  object-fit: cover;
  border-radius: 20px;
}

@media (min-width: 768px) {
  .work_modal-job_image {
    flex: 0 0 43%;
  }

  .work_modal-job_image img {
    aspect-ratio: 430 / 287;
  }
}

.work_modal-job_text {
  flex: 1;
}

.work_modal-job_text .work_job-heading {
  margin-bottom: 15px;
}

.work_modal-job_desc {
  color: var(--color-text);
  line-height: 1.7;
}

/* やりがい・魅力 / ある1日の流れ 共通の白ボックス+リボン見出し */
.work_modal-ribbonBox {
  position: relative;
  margin-top: 27px;
  padding: 60px 20px 20px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .work_modal-ribbonBox {
    padding: 84px 50px 40px;
  }
}

.work_modal-ribbon {
  position: absolute;
  top: -3px;
  left: 20px;
  padding: 6px 20px;
  border-radius: 0 0 10px 10px;
  background-color: var(--color-ribbon);
  box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.1);
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 768px) {
  .work_modal-ribbon {
    left: 50px;
    font-size: 20px;
  }
}

/* やりがい・魅力 */
.work_modal-meritList {
  display: flex;
  flex-direction: column;
  gap: 30px;
  list-style: none;
}

.work_modal-merit:not(:last-child) {
  padding-bottom: 30px;
  border-bottom: 1px solid #cccccc;
}

.work_modal-merit {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media (min-width: 768px) {
  .work_modal-merit {
    flex-direction: row;
    gap: 30px;
  }
}

.work_modal-merit_body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 15px;
}

.work_modal-merit_head {
  display: flex;
  align-items: center;
  gap: 15px;
}

.work_modal-merit_num {
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
}

@media (min-width: 768px) {
  .work_modal-merit_num {
    font-size: 50px;
  }
}

.work_modal-merit_title {
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}

.work_modal-merit_text {
  color: var(--color-text);
  line-height: 1.7;
}

.work_modal-merit_image img {
  display: block;
  width: 100%;
  aspect-ratio: 295 / 197;
  object-fit: cover;
  border-radius: 20px;
}

@media (min-width: 768px) {
  .work_modal-merit_image {
    flex: 0 0 40%;
    max-width: 300px;
  }

  .work_modal-merit_image img {
    aspect-ratio: 430 / 287;
  }
}

/* ある1日の流れ */
.work_modal-scheduleList {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  list-style: none;
}

@media (min-width: 768px) {
  .work_modal-scheduleList {
    gap: 30px;
  }
}

.work_modal-schedule {
  position: relative;
}

.work_modal-schedule::before {
  content: "";
  position: absolute;
  top: 24px;
  left: 25px;
  width: 3px;
  height: 100%;
  border-left: 3px dashed var(--color-tag-yellow);
}

@media (min-width: 768px) {
  .work_modal-schedule::before {
    top: 30px;
    left: 28px;
  }
}

.work_modal-schedule:last-child:before {
  content: none;
}

.work_modal-schedule_head {
  display: flex;
  align-items: center;
  gap: 15px;
}

.work_modal-schedule_time {
  position: relative;
  z-index: 1;
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-tag-yellow);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .work_modal-schedule_time {
    width: 60px;
    height: 60px;
    font-size: 18px;
  }
}

.work_modal-schedule_title {
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .work_modal-schedule_title {
    font-size: 18px;
  }
}

.work_modal-schedule_body {
  padding-left: 65px;
  color: var(--color-text);
  line-height: 1.7;
}

@media (min-width: 768px) {
  .work_modal-schedule_body {
    padding-left: 80px;
  }
}

.work_modal-schedule_hasImage {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

@media screen and (max-width: 767px) {
  .work_modal-schedule_image {
    padding-left: 65px;
  }
}

@media (min-width: 768px) {
  .work_modal-schedule_hasImage {
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
  }

  .work_modal-schedule_content {
    flex: 1;
  }

  .work_modal-schedule_image {
    flex: 0 0 230px;
  }
}

.work_modal-schedule_image img {
  display: block;
  width: 100%;
  aspect-ratio: 230 / 154;
  object-fit: cover;
  border-radius: 20px;
}

/* 求人を探すボタン・相互リンク */
.work_modal-btns {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 32px;
}

@media (min-width: 768px) {
  .work_modal-btns {
    flex-direction: row;
    gap: 20px;
    margin-top: 40px;
  }
}

a.work_modal-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 500px;
  width: 100%;
  margin: auto;
  gap: 8px;
  padding: 16px 30px;
  border-radius: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transition: var(--transition);
  position: relative;
}

@media (min-width: 768px) {
  a.work_modal-btn {
    flex: 1;
    border-radius: 999em;
  }
}

@media (any-hover: hover) {
  .work_modal-btn:hover {
    background-color: var(--color-primary_hover);
  }
}

.work_modal-btn::before {
  content: "\E885";
  font-family: recop-iconfonts;
  font-size: 20px;
  font-weight: normal;
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
}

.work_modal-crossLink {
  max-width: 500px;
  margin-top: 30px;
  margin-right: 0;
  margin-left: auto;
}

@media screen and (min-width: 768px){
  .work_modal-crossLink{
    margin-top: 70px;
  }
}

.work_modal-crossLink a,
.work_modal-crossLink button {
  display: block;
  width: 100%;
  gap: 8px;
  padding-left: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  position: relative;
  transition: var(--transition);
}

.work_modal-crossLink .work_job-more_arrow:before {
  position: absolute;
  right: 0;
  bottom: 0;
}

@media (min-width: 768px) {

  .work_modal-crossLink a,
  .work_modal-crossLink button {
    font-size: 18px;
  }
}

@media (hover: hover) and (pointer: fine) {

  .work_modal-crossLink a:hover,
  .work_modal-crossLink button:hover,
  .work_job-trigger:hover .work_job-more {
    color: var(--color-accent);
  }
}

/* =================================================================
  jobsearch
================================================================= */
.jobsearch_wave {
  background-image: url("/jobfind-pc/original/images/bg_wave_top_beige.svg");
}

.jobsearch {
  padding-top: 20px;
}

@media screen and (min-width: 768px) {
  .jobsearch {
    padding: 70px 0 120px;
  }
}

.jobsearch .l-sec_inner {
  max-width: 1075px;
}

.jobsearch_layout {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "area"
    "freeword"
    "jobtype";
  gap: 40px;
}

@media (min-width: 981px) {
  .jobsearch_layout {
    grid-template-columns: 524px 1fr;
    grid-template-areas:
      "area freeword"
      "area jobtype";
    gap: 100px 120px;
  }
}

.jobsearch_group-area {
  grid-area: area;
}

.jobsearch_group-freeword {
  grid-area: freeword;
}

.jobsearch_group-jobtype {
  grid-area: jobtype;
}

.jobsearch_head {
  position: relative;
  margin-bottom: 24px;
  padding-left: 18px;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .jobsearch_head {
    font-size: 24px;
  }
}

.jobsearch_head-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  border-radius: 2px;
  background-color: var(--color-mint);
}

/* jobsearch : フリーワード検索(job-search-widgetテンプレート) */
.jobsearch_group-freeword .fwdObj form {
  display: flex;
  border: 1px solid var(--color-primary);
  border-radius: 10px;
  overflow: hidden;
}

.jobsearch_group-freeword .fwdObj input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 50px;
  padding: 0 20px;
  border: 0;
  background-color: var(--color-white);
  color: var(--color-text);
  font-size: 16px;
}

.jobsearch_group-freeword .fwdObj button {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  border: 0;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-family: recop-iconfonts;
  font-size: 30px;
  text-align: center;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .jobsearch_group-freeword .fwdObj button:hover {
    background-color: var(--color-primary_hover);
  }
}

/* jobsearch : 職種で探す */
.jobsearch_btnList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

a.jobsearch_btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 500px;
  margin: auto;
  min-height: 80px;
  padding: 8px 40px;
  border-radius: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  a.jobsearch_btn:hover {
    background-color: var(--color-primary_hover);
  }
}

@media screen and (min-width: 980px) {
  a.jobsearch_btn {
    margin-left: 0;
    max-width: 300px;
  }
}

.jobsearch_btn-arrow::before {
  position: absolute;
  content: "\E885";
  font-family: recop-iconfonts;
  color: #fff;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}

/* =================================================================
  support(安心できる環境)
================================================================= */
.support_wave {
  background-image: url("/jobfind-pc/original/images/bg_wave_bottom_beige.svg");
}

.support {
  position: relative;
  background-color: var(--color-bg-warm);
}

@media screen and (min-width: 768px) {
  .support {
    padding-top: 50px;
  }
}

/* -----------------------------------------------------------------
  support : タブ切り替え
----------------------------------------------------------------- */
.support_tab {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px 10px;
  margin-bottom: 32px;
  list-style: none;
  line-height: 1.2;
}

@media (min-width: 768px) {
  .support_tab {
    flex-direction: row;
    gap: 20px;
  }
}

.support_tab-btn,
a.support_tab-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: auto;
  min-height: 50px;
  padding: 3px 15px 3px 3px;
  border-radius: 999em;
  background-color: var(--color-tag-pink);
  color: var(--color-accent);
  font-weight: 700;
  line-height: 1.4;
  transition: var(--transition);
}

@media (min-width: 768px) {

  .support_tab-btn,
  a.support_tab-btn {
    width: 250px;
    padding: 3px;
    gap: 0;
  }
}

@media (hover: hover) and (pointer: fine) {
  .support_tab-btn:hover {
    color: #fff;
    background-color: var(--color-accent_hover);
  }
}

.support_tab-btn.is-active {
  background-color: var(--color-accent);
  color: var(--color-white);
  position: relative;
  pointer-events: none;
}

.support_tab-btn.is-active::before {
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  content: "";
  transform: translateX(-50%);
  border-right: 10px solid transparent;
  border-left: 10px solid transparent;
}

.support_tab-btn.is-active::before {
  bottom: -9px;
  border-top: 10px solid var(--color-accent);
}

.support_tabFooter .support_tab-btn.is-active::before {
  bottom: auto;
  top: -9px;
  border-top: none;
  border-bottom: 10px solid var(--color-accent);
}

.support_tab-icon {
  flex-shrink: 0;
  display: block;
  padding: 8px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
}

.support_tab-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support_tab-label {
  flex: 1;
  text-align: center;
}

@media screen and (min-width: 768px) {
  .support_tab-label {
    font-size: 18px;
  }
}

/* -----------------------------------------------------------------
  support : カード
----------------------------------------------------------------- */
.support_card {
  position: relative;
  z-index: 1;
  padding: 30px 0;
  background-color: var(--color-white);
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .support_card {
    padding: 60px 0;
    border-radius: 50px;
  }
}

.support_panelHead {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 18px;
  gap: 6px;
  margin-bottom: 30px;
  text-align: center;
}

@media (min-width: 768px) {
  .support_panelHead {
    margin-bottom: 60px;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
  }
}

.support_panelHead-icon {
  flex-shrink: 0;
  display: block;
  width: 50px;
  height: 50px;
}

@media (min-width: 768px) {
  .support_panelHead-icon {
    width: 60px;
    height: 60px;
  }
}

.support_panelHead-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.support_panelHead-title {
  color: var(--color-text);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .support_panelHead-title {
    font-size: 30px;
  }
}

.support_panelLead {
  margin-bottom: 40px;
  padding: 0 18px;
  font-size: 18px;
  color: var(--color-accent);
  font-weight: 700;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .support_panelLead {
    margin-bottom: 60px;
    text-align: center;
  }
}

.support_dummy {
  color: var(--color-text);
  line-height: 1.7;
}

.support_block {
  margin-bottom: 40px;
  padding: 0 18px;
}

@media (min-width: 768px) {
  .support_block {
    margin-bottom: 60px;
    padding: 0 50px;
  }
}

.support_block-heading {
  margin-bottom: 24px;
  padding-bottom: 10px;
  border-bottom: 2px dashed var(--color-accent);
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

@media (min-width: 768px) {
  .support_block-heading {
    font-size: 22px;
    margin-bottom: 40px;
  }
}

/* -----------------------------------------------------------------
  support : 入社後のサポートステップ
----------------------------------------------------------------- */
.support_stepList {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  list-style: none;
}

@media (min-width: 768px) {
  .support_stepList {
    flex-direction: row;
    align-items: stretch;
    justify-content: center;
    gap: 7px;
  }
}

.support_step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 20px;
  background-color: var(--color-tag-yellow);
  border-radius: 20px;
}

@media (min-width: 768px) {
  .support_step {
    width: 310px;
  }
}

.support_step-period {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 15px;
  background-color: var(--color-white);
  border-radius: 15px;
  color: var(--color-accent);
  font-size: 16px;
  font-weight: 700;
}

.support_step-title {
  width: 100%;
  padding-bottom: 4px;
  border-bottom: 2px dashed var(--color-white);
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

.support_step-text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

.support_stepArrow {
  position: relative;
  display: flex;
  align-items: center;
}

.support_stepArrow::before {
  content: "";
  width: 30px;
  height: 13px;
  background: url("/jobfind-pc/original/images/icon_arrow_dots.png") no-repeat center/contain;
  display: block;
}

@media screen and (max-width: 767px) {
  .support_stepArrow {
    transform: rotate(90deg);
    padding: 10px 0;
  }
}

/* -----------------------------------------------------------------
  support : 安心してはじめられる3つの理由
----------------------------------------------------------------- */
.support_pointList {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}

.support_point {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

@media (min-width: 768px) {
  .support_point {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding-bottom: 24px;
  }
}

.support_point-image {
  position: relative;
  flex-shrink: 0;
  width: 180px;
}

@media (min-width: 768px) {
  .support_point-image {
    width: 230px;
  }
}

.support_point-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  object-fit: cover;
}

.support_point-num {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 70px;
  height: 70px;
  background-color: var(--color-tag-mint);
  border-radius: 50%;
  color: var(--color-text);
  font-family: var(--font-en);
  text-align: center;
  font-weight: 700;
  line-height: 1.1;
}

.support_point-num_label {
  font-size: 16px;
}

.support_point-num_no {
  font-size: 30px;
  font-weight: 700;
}

.support_point-title {
  margin-bottom: 15px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.support_point-text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

/* -----------------------------------------------------------------
  support : 働きやすさを支える福利厚生・制度
----------------------------------------------------------------- */
.support_benefitList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 80px 20px;
  margin-bottom: 15px;
  padding-top: 60px;
  list-style: none;
}

@media (min-width: 768px) {
  .support_benefitList {
    grid-template-columns: repeat(3, 1fr);
    gap: 90px 20px;
    margin-bottom: 30px;
  }
}

.support_benefit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 52px 20px 24px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  position: relative;
}

@media (min-width: 768px) {
  .support_benefit {
    padding-top: 80px;
  }
}

.support_benefit img {
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  top: -60px;
  left: 50%;
  transform: translateX(-50%);
}

@media (min-width: 768px) {
  .support_benefit img {
    width: 120px;
    height: 120px;
  }

}

.support_benefit-title {
  min-height: calc(1.7em * 2);
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.support_benefit-text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

.support_other {
  margin-bottom: 40px;
  padding: 24px 20px;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .support_other {
    margin-bottom: 60px;
    padding: 20px;
  }
}

.support_other-heading {
  position: relative;
  margin-bottom: 24px;
  padding-left: 18px;
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}

.support_other-heading_bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 8px;
  height: 100%;
  border-radius: 2px;
  background-color: var(--color-mint);
}

.support_otherList {
  display: flex;
  flex-direction: column;
  gap: 20px;
  list-style: none;
}

@media (min-width: 768px) {
  .support_otherList {
    flex-direction: row;
  }
}

.support_otherItem {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 20px;
  border-bottom: 1px solid #ccc;
}

.support_otherItem:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

@media (min-width: 768px) {
  .support_otherItem {
    flex: 1;
    align-items: center;
    padding-bottom: 0;
    border-bottom: 0;
  }
}

.support_otherItem-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

@media (min-width: 768px) {
  .support_otherItem-head {
    flex-direction: column;
  }
}

.support_otherItem-icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
}

@media (min-width: 768px) {
  .support_otherItem-icon {
    width: 80px;
    height: 80px;
  }
}

.support_otherItem-title {
  color: var(--color-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
}

.support_otherItem-text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

.support_note {
  color: var(--color-text);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

@media (min-width: 768px) {
  .support_note {
    font-size: 20px;
  }
}

.support_note-mark {
  padding: 0 4px;
  background-image: linear-gradient(to top, var(--color-tag-mint) 40%, transparent 40%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* -----------------------------------------------------------------
  support : 職場の雰囲気カード
----------------------------------------------------------------- */
.support_voiceList {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  margin-bottom: 40px;
  list-style: none;
}

@media (min-width: 768px) {
  .support_voiceList {
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 60px;
  }
}

.support_voice {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

.support_voice-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  padding: 15px;
  background-color: var(--color-tag-yellow);
}

@media (min-width: 768px) {
  .support_voice-profile {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 15px 20px;
  }
}

.support_voice-avatar {
  flex-shrink: 0;
  display: block;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  overflow: hidden;
}

.support_voice-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.support_voice-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.support_voice-tags {
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}

.support_voice-tags>span {
  position: relative;
}

.support_voice-tags>span::before {
  content: "●";
  color: #fff;
  position: relative;
  padding-right: 5px;
}

.support_voice-comment {
  padding: 5px 15px;
  background-color: var(--color-white);
  border-radius: 20px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
}

.support_voice-comment > span{
  display: inline-block;
}

.support_voice-comment_label {
  color: var(--color-accent);
}

.support_voice-body {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 20px 20px;
}

@media (min-width: 768px) {
  .support_voice-body {
    padding: 20px;
  }
}

.support_voice-title {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.support_voice-text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

/* -----------------------------------------------------------------
  support : 職場風景・ギャラリー
----------------------------------------------------------------- */
.gallery_block {
  padding: 0 18px;
}

@media screen and (min-width: 768px) {
  .gallery_block {
    padding: 0 50px;
  }
}

.support_gallery {
  position: relative;
  display: flex;
  flex-direction: column-reverse;
  padding: 0 0 80px;
  background: linear-gradient(to bottom,
      #fff 0%,
      #fff 20%,
      var(--color-bg-yellow) 20%,
      var(--color-bg-yellow) 100%);
}

@media screen and (max-width: 767px) {
  .support_gallery {
    position: relative;
    padding: 0 20px 40px;
    background: linear-gradient(to bottom,
        #fff 0%,
        #fff 20%,
        var(--color-bg-yellow) 20%,
        var(--color-bg-yellow) 100%);
  }
}

.support_gallery::before,
.support_gallery::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 100%;
  height: 6.35vw;
  background-repeat: no-repeat;
  background-size: 100%;
  background-position: center bottom;
  transform: translateX(-50%);
}

.support_gallery::before {
  top: calc((20% - 6.35vw) + 1px);
  background-image: url("/jobfind-pc/original/images/bg_curve_top_yellow.svg");
}

.support_gallery::after {
  bottom: -1px;
  background-image: url("/jobfind-pc/original/images/bg_curve_bottom_white.svg");
}

/* splide */
@media screen and (max-width: 767px){
  .support_gallery-slider{
    max-width: 400px;
    margin: auto;
  }
}
.js-gallery_slider {
  visibility: hidden;
}

.js-gallery_slider.is-initialized {
  visibility: visible;
}

.js-gallery_slider .splide__track {
  overflow-x: hidden;
  overflow-y: visible;
}

.js-gallery_slider .splide__list {
  align-items: flex-end;
}

@media screen and (min-width: 768px) {
  .js-gallery_slider .splide__slide {
    width: calc((100vw - 41.6406vw) / 4);
    max-width: 180px;
    aspect-ratio: 1 / 1;
  }

  .js-gallery_slider .splide__slide.is-active {
    width: 41.6406vw;
    max-width: 533px;
    aspect-ratio: 533 / 400;
  }
}

.support_gallery-image {
  display: block;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 768px) {
  .support_gallery-image {
    transform: scale(0.834);
    transition: transform 1s ease, border-radius 1s ease;
  }
}

.support_gallery-slide:not(.is-active) .support_gallery-image {
  cursor: pointer;
}

.support_gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.support_gallery-slide.is-active .support_gallery-image {
  transform: scale(1);
}

.support_gallery-slide.is-active .support_gallery-image img {
  border-radius: 20px;
}

/* サムネイル画像 */
.support_gallery-image_thumb {
  display: none;
}

.support_gallery-image_main {
  display: block;
}

@media screen and (min-width: 768px) {
  .support_gallery-image_thumb {
    display: block;
  }

  .support_gallery-image_main {
    display: none;
  }

  .support_gallery-slide.is-active .support_gallery-image_thumb {
    display: none;
  }

  .support_gallery-slide.is-active .support_gallery-image_main {
    display: block;
  }

  .support_gallery-image_thumb {
    transition: opacity var(--transition);
  }
}

@media screen and (min-width: 768px) and (any-hover: hover) {
  .support_gallery-slide:not(.is-active) .support_gallery-image:hover .support_gallery-image_thumb {
    opacity: var(--opacity);
  }
}

.support_gallery-slide.is-active {
  position: relative;
  z-index: 1;
}

/* SP幅ではサムネイル演出をやめ、2枚1組(縦並び)を1ページとして切り替えるスライダーにする */
@media screen and (max-width: 767px) {
  .js-gallery_slider .splide__list {
    align-items: stretch;
  }

  .support_gallery-slide,
  .support_gallery-slide.is-active {
    max-width: none;
  }

  .support_gallery-image,
  .support_gallery-slide.is-active .support_gallery-image {
    width: 100%;
    height: 100%;
    margin-bottom: 0;
    aspect-ratio: auto;
  }

  .support_gallery-image img,
  .support_gallery-slide.is-active .support_gallery-image img {
    border-radius: 10px;
  }

  .support_gallery-image_thumb {
    display: none;
  }

  .support_gallery-image_main {
    display: block;
  }
}

.support_gallery-controls {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-top: 20px;
}

.support_gallery-center {
  gap: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (min-width: 768px){
  .support_gallery-center {
    gap: 7px;
  }
}

.support_gallery-pagination.splide__pagination {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  list-style: none;
  padding: 0;
}

@media screen and (min-width: 768px){
  .support_gallery-pagination.splide__pagination {
    gap: 7px;
  }
}

.support_gallery-pagination .splide__pagination__page {
  display: block;
  width: 14px;
  height: 14px;
  margin: 0;
  border-radius: 50%;
  background-color: var(--color-mint);
  opacity: 1;
  transform: none;
  transition: background-color var(--transition);
}

@media screen and (max-width: 767px) {
  .support_gallery-pagination .splide__pagination__page {
    width: 16px;
    height: 16px;
  }
}

.support_gallery-pagination .splide__pagination__page.is-active {
  background-color: var(--color-mint-dark);
  transform: none;
}

.support_gallery-toggle {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-mint-dark);
  transition: var(--transition);
}

@media screen and (max-width: 767px) {
  .support_gallery-toggle {
    width: 22px;
    height: 22px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .support_gallery-toggle:hover {
    background-color: var(--color-accent);
  }
}

.support_gallery-toggle_icon {
  position: relative;
  width: 8px;
  height: 8px;
}

.support_gallery-toggle_icon::before,
.support_gallery-toggle_icon::after {
  content: "";
  position: absolute;
  top: 0;
  width: 2px;
  height: 8px;
  background-color: var(--color-white);
}

.support_gallery-toggle_icon::before {
  left: 1px;
}

.support_gallery-toggle_icon::after {
  left: 5px;
}

/* 一時停止中(aria-pressed=true)は再生アイコン(三角)に切り替える */
.support_gallery-toggle[aria-pressed="true"] {
  background-color: var(--color-accent);
}

.support_gallery-toggle[aria-pressed="true"] .support_gallery-toggle_icon::before,
.support_gallery-toggle[aria-pressed="true"] .support_gallery-toggle_icon::after {
  content: none;
}

.support_gallery-toggle[aria-pressed="true"] .support_gallery-toggle_icon {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 6px;
  left: 1px;
  border-color: transparent transparent transparent var(--color-white);
}

.support_gallery-arrow {
  position: relative;
}

.support_gallery-arrow::before {
  content: "\E845";
  font-family: recop-iconfonts;
  font-size: 22px;
  font-weight: bold;
}

.support_gallery-arrow-prev {
  transform: rotate(180deg);
}

@media (any-hover: hover) {
  .support_gallery-arrow:hover {
    opacity: var(--opacity);
  }
}

/* -----------------------------------------------------------------
  support : 求人を探すボタン周り
----------------------------------------------------------------- */
.support_cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  margin-top: 40px;
  padding: 0 18px;
}

@media (min-width: 768px) {
  .support_cta {
    margin-top: 60px;
  }
}

.support_cta-note {
  display: flex;
  align-items: center;
  gap: 20px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
}

@media (min-width: 768px) {
  .support_cta-note {
    font-size: 18px;
  }
}

.support_cta-note_strong {
  color: var(--color-accent);
}

.support_cta-note_deco {
  position: relative;
}

.support_cta-note_deco::before {
  content: "";
  width: 3px;
  height: 30px;
  border-left: 2px dashed var(--color-text);
  display: block;
  position: relative;
}

.support_cta-note .support_cta-note_deco:first-child {
  transform: rotate(-30deg);
}

.support_cta-note .support_cta-note_deco:last-child {
  transform: rotate(30deg);
}

/* -----------------------------------------------------------------
  support : ほかの働く環境を知る(フッター側タブ)
----------------------------------------------------------------- */
.support_tabFooter {
  position: relative;
  z-index: 1;
  margin-top: 40px;
  text-align: center;
}

@media (min-width: 768px) {
  .support_tabFooter {
    margin-top: 60px;
  }
}

.support_tabFooter-lead {
  margin-bottom: 20px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.support_tabFooter .support_tab {
  margin-bottom: 0;
}

/* =================================================================
  interview(働くスタッフの声)
================================================================= */
@media screen and (min-width: 768px) {
  .interview {
    padding: 120px 0 150px;
  }
}

/* -----------------------------------------------------------------
  interview : スタッフカード
----------------------------------------------------------------- */
.interview_list {
  padding: 0 20px;
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  justify-content: center;
  gap: 15px;
  list-style: none;
}

@media (min-width: 480px) {
  .interview_list {
    padding: 0;
    grid-template-columns: repeat(2, minmax(0, 265px));
    justify-content: center;
    gap: 20px;
  }
}

@media (min-width: 1024px) {
  .interview_list {
    grid-template-columns: repeat(4, minmax(0, 265px));
  }
}

.interview_card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  height: 100%;
  text-align: left;
  transition: var(--transition);
}

@media (any-hover: hover) {
  .interview_card:hover {
    opacity: var(--opacity);
  }
}

.interview_card-box {
  height: 100%;
  background-color: var(--color-white);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
  overflow: hidden;

}

.interview_card-image {
  padding: 0 35px;
}

.interview_card-image img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 452 / 400;
  object-fit: cover;
}

@media screen and (min-width: 768px) {
  .interview_card-image {
    padding: 0 10px;
  }

  .interview_card-image img {
    aspect-ratio: 452 / 600;
  }
}

.interview_card-profile {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 15px 20px;
  padding-right: 10px;
  background-color: var(--color-primary);
  color: var(--color-white);
}

.interview_card-name {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.interview_card-detail {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-left: 14px;
  border-left: 4px solid var(--color-white);
  font-size: 16px;
  line-height: 1.7;
}

.interview_card-quote {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 15px 20px 20px;
}

.interview_card-quote-text {
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.interview_card-more {
  width: 85%;
  margin: auto;
  margin-right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--color-accent);
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  padding-right: 10px;
  line-height: 1.2;
  transition: var(--transition);
}

@media screen and (min-width: 768px) {
  .interview_card-more {
    width: 100%;
  }
}

@media (any-hover: hover) {
  .interview_card:hover .interview_card-more {
    color: var(--color-accent);
  }
}

.interview_card-more_arrow {
  position: relative;
}

.interview_card-more_arrow::before {
  display: block;
  content: "\E885";
  font-family: recop-iconfonts;
  color: var(--color-accent);
  font-size: 24px;
  position: relative;
  right: 0;
}

/* -----------------------------------------------------------------
  interview : モーダル本文(interview_cardで開く.modal_containerの内容)
----------------------------------------------------------------- */
.interview_detail-head {
  position: relative;
  aspect-ratio: 375 / 663;
  border-radius: 20px 20px 0 0;
}

@media (min-width: 768px) {
  .interview_detail-head {
    aspect-ratio: 1000 / 500;
  }
}

.interview_detail-head_band {
  position: absolute;
  right: 0;
  bottom: 8.9%;
  left: 0;
  height: 30.77%;
  background-color: var(--color-primary);
}

@media (min-width: 768px) {
  .interview_detail-head_band {
    height: 34%;
    bottom: 0;
  }
}

.interview_detail-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 60.33%;
}

@media (min-width: 768px) {
  .interview_detail-image {
    left: 22%;
    width: 78%;
    height: 94%;
  }
}

.interview_detail-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .interview_detail-image img {
    border-radius: 0 0 0 30px;
  }
}

.interview_detail-profile {
  position: absolute;
  bottom: 0;
  left: 5.33%;
  width: 89.33%;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
}

@media (min-width: 768px) {
  .interview_detail-profile {
    bottom: auto;
    top: 6.4%;
    left: 3%;
    width: 47%;
    padding: 30px;
  }
}

.interview_detail-profile_name {
  margin-bottom: 10px;
  color: var(--color-accent);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
}

.interview_detail-profile_meta {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.interview_detail-profile_meta-bar {
  flex-shrink: 0;
  width: 8px;
  border-radius: 2px;
  background-color: var(--color-accent);
}

.interview_detail-profile_meta-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

.interview_detail-profile_catch {
  margin-bottom: 10px;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

@media (min-width: 768px) {
  .interview_detail-profile_catch {
    margin-bottom: 15px;
    font-size: 22px;
  }
}

.interview_detail-profile_text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

@media (min-width: 768px) and (max-width: 1000px) {
  .interview_detail-profile {
    padding: 2vw;
  }

  .interview_detail-profile_name {
    font-size: 2vw;
  }

  .interview_detail-profile_meta {
    gap: 1vw;
    margin-bottom: 2vw;
  }

  .interview_detail-profile_meta-text {
    font-size: 1.6vw;
    gap: 0.5vw;
  }

  .interview_detail-profile_catch {
    margin-bottom: 1vw;
    font-size: 1.8vw;
  }

  .interview_detail-profile_text {
    font-size: 1.6vw;
  }
}

/* -----------------------------------------------------------------
  interview : モーダル本文
----------------------------------------------------------------- */
.interview_detail-body {
  padding: 30px 20px 20px;
}

@media screen and (min-width: 768px) {
  .interview_detail-body {
    padding: 50px 60px;
  }
}

/* -----------------------------------------------------------------
  interview : モーダル本文 - Q&A
----------------------------------------------------------------- */
.interview_detail-qa {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    "q1"
    "q2"
    "photo1"
    "q3"
    "q4"
    "photo2";
  gap: 30px;
  margin-bottom: 32px;
}

@media (min-width: 768px) {
  .interview_detail-qa {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "q1 q2"
      "q3 q4"
      "photo1 photo2";
    gap: 50px;
  }
}

.interview_detail-qa_item-q1 {
  grid-area: q1;
}

.interview_detail-qa_item-q2 {
  grid-area: q2;
}

.interview_detail-qa_item-q3 {
  grid-area: q3;
}

.interview_detail-qa_item-q4 {
  grid-area: q4;
}

.interview_detail-photo-1 {
  grid-area: photo1;
}

.interview_detail-photo-2 {
  grid-area: photo2;
}

.interview_detail-qa_item {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.interview_detail-qa_question {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 10px;
  border-bottom: 2px solid #00C48D;
}

.interview_detail-qa_num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: var(--color-tag-mint);
  color: var(--color-text);
  font-size: 20px;
  font-weight: 700;
  text-align: center;
}

.interview_detail-qa_text {
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.interview_detail-qa_answer {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

.interview_detail-photo img {
  display: block;
  width: 100%;
  aspect-ratio: 335 / 251;
  object-fit: cover;
  border-radius: 20px;
}

@media (min-width: 768px) {
  .interview_detail-photo img {
    aspect-ratio: 430 / 323;
  }
}

/* -----------------------------------------------------------------
  interview : モーダル本文 - 応募を考えている方へメッセージ
----------------------------------------------------------------- */
.interview_detail-message {
  margin-bottom: 32px;
  padding: 20px;
  background-color: var(--color-bg-warm);
  border-radius: 20px;
}

.interview_detail-message_heading {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.interview_detail-message_heading-bar {
  flex-shrink: 0;
  width: 8px;
  height: 32px;
  border-radius: 2px;
  background-color: var(--color-mint);
}

.interview_detail-message_text {
  color: var(--color-text);
  font-size: 16px;
  line-height: 1.7;
}

/* -----------------------------------------------------------------
  interview : モーダル本文 - 前のスタッフ/次のスタッフ
----------------------------------------------------------------- */
.interview_detail-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 15px;
  border-top: 1px solid #cccccc;
}

.interview_detail-nav_btn {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.7;
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .interview_detail-nav_btn:hover {
    color: var(--color-accent);
  }
}

@media screen and (min-width: 768px) {
  .interview_detail-nav_btn {
    font-size: 18px;
  }
}

.interview_detail-nav_arrow {
  position: relative;
}

.interview_detail-nav_arrow::before {
  display: block;
  content: "\E885";
  font-family: recop-iconfonts;
  color: var(--color-accent);
  font-size: 24px;
}

.interview_detail-nav_btn-prev .interview_detail-nav_arrow {
  transform: rotate(180deg);
}

.interview_detail-nav_btn[aria-disabled="true"],
.interview_detail-nav_btn[aria-disabled="true"] .interview_detail-nav_arrow::before {
  color: #999999;
  pointer-events: none;
}


/* =================================================================
  faq(よくある質問)
================================================================= */
.faq {
  position: relative;
  overflow: hidden;
  background-color: var(--color-tag-yellow);
}

@media screen and (min-width: 768px) {
  .faq {
    padding: 100px 0;
  }
}

.faq_heading {
  margin-bottom: 50px;
}

/* -----------------------------------------------------------------
  faq : 一覧
----------------------------------------------------------------- */
.faq_list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}

.faq_item {
  background-color: var(--color-white);
  border-radius: 50px;
  transition: var(--transition);
}

.faq_item:has(.faq_q[aria-expanded="true"]) {
  border-radius: 30px;
}

@media screen and (max-width: 767px){
  .faq_item,
  .faq_item:has(.faq_q[aria-expanded="true"]){
    border-radius: 20px;
  }
}

.faq_item dt {
  transition: var(--transition);
}

@media (hover: hover) and (pointer: fine) {
  .faq_item dt:hover {
    opacity: var(--opacity);
  }
}

.faq_q {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  padding: 10px;
}

@media (min-width: 768px) {
  .faq_q {
    padding: 10px 20px;
  }
}

.faq_q-mark {
  flex-shrink: 0;
  color: var(--color-primary);
  font-family: var(--font-en);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
}

.faq_q-text {
  flex: 1;
  color: var(--color-text);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.7;
}

.faq_q-icon {
  position: relative;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
}

.faq_q-icon::before,
.faq_q-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background-color: var(--color-text);
  transform: translate(-50%, -50%);
  border-radius: 999em;
}

.faq_q-icon::before {
  width: 16px;
  height: 3px;
}

.faq_q-icon::after {
  width: 3px;
  height: 16px;
  transition: transform 0.3s ease;
}

.faq_q[aria-expanded="true"] .faq_q-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

@media (hover: hover) and (pointer: fine) {

  .faq_q:hover .faq_q-icon::before,
  .faq_q:hover .faq_q-icon::after,
  .faq_q[aria-expanded="true"].faq_q-icon::before,
  .faq_q[aria-expanded="true"].faq_q-icon::after {
    background-color: var(--color-accent);
  }
}

.faq_a {
  padding: 0 10px 10px;
}

@media screen and (min-width: 768px) {
  .faq_a {
    padding: 0 20px 20px;
  }
}

.faq_a_inner {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 15px;
  background-color: #ffe9ed;
  border-radius: 20px;
}

.faq_a-mark {
  flex-shrink: 0;
  color: var(--color-accent);
  font-family: var(--font-en);
  font-size: 37px;
  font-weight: 700;
  line-height: 1;
}

.faq_a-text {
  margin-top: 5px;
  flex: 1;
  color: var(--color-text);
}

/* =================================================================
  entry
================================================================= */
.entry_wave {
  margin-bottom: -16px;
  background-image: url("/jobfind-pc/original/images/bg_wave_bottom_yellow.svg");
}

@media (min-width: 768px) {
  .entry_wave {
    margin-bottom: -51px;
  }
}


.entry {
  padding-top: 75px;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

@media (min-width: 768px) {
  .entry {
    padding-top: 180px;
    padding-bottom: 116px;
  }
}

.entry_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.entry_bg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.entry_inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.entry_heading {
  margin-bottom: 20px;
  color: var(--color-white);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
}

@media (min-width: 768px) {
  .entry_heading {
    font-size: 34px;
  }
}

.entry_lead {
  color: #fff;
  font-weight: 400;
  text-align: center;
}

.entry_btn .c-btn {
  width: 335px;
  font-size: 24px;
  background-color: var(--color-white);
  color: var(--color-accent);
  border: 2px solid var(--color-white);
  transition: var(--transition);
}

.c-btn_icon::before{
  font-size: 24px;
}

@media (min-width: 768px) {
  .entry_btn .c-btn {
    min-width: 400px;
  }
}

@media (hover: hover) and (pointer: fine) {
  .entry_btn .c-btn:hover {
    border-color: var(--color-accent);
    background-color: #fff;
  }
}


/* =================================================================
  footer
================================================================= */
#footer {
  position: static;
}

@media (hover: hover) and (pointer: fine) {
  #footer a:hover {
    text-decoration: underline;
  }
}