@charset "utf-8";
/** ==============================================
01.共通
============================================== **/
main {
  margin-top: 102px;
}

@media (max-width: 520px) {
  main {
    margin-top: 56px;
  }
}

/** ==============================================
02.テンプレート
============================================== **/
/* -------------------------------------
header
-------------------------------------*/
header {
  color: var(--base_color);
}
header .h-logo .logo-img {
  display: none;
}
header.scroll {
  color: #fff;
}
header.scroll .h-logo .logo-img_bk {
  display: none;
}
header.scroll .h-logo .logo-img {
  display: block;
}
header.scroll .h-logo span {
  border-color: #fff;
}

header nav .sp-rec-tit {
  display: none;
}

/* 詳細ページ
インタビューのみの場合は、エントリーボタンを非表示 */
.not_recruiting a.h-rec.recbtn {
  display: none;
}

@media (max-width: 520px) {
  header {
    background: none;
  }
  header .h-logo .logo-img {
    display: none;
  }
  header.scroll_sp {
    color: #fff;
  }
  header.scroll_sp .h-logo .logo-img_bk {
    display: none;
  }
  header.scroll_sp .h-logo .logo-img {
    display: block;
  }
  header.scroll_sp .h-logo span {
    border-color: #fff;
  }

  header nav {
    color: #fff;
    background: var(--c_main_d);
  }
  header nav .sp-rec-tit {
    display: block;
    position: absolute;
    left: 15%;
    top: 20px;
    padding: 5px 30px;
    font-size: 1.5rem;
    color: var(--c_main_d);
    line-height: var(--lh_s);
    background: #fff;
  }
  header nav .gnav li a {
    border-bottom-color: #fff;
  }

  header .hamburger span {
    background: var(--base_color);
  }
  header.scroll_sp .hamburger span {
    background: #fff;
  }
  /* nav-open時 */
  header.nav-open .hamburger span {
    background: var(--c_sub);
    background: #fff;
  }
}

/* -------------------------------------
footer
-------------------------------------*/
footer {
  padding-bottom: 20px;
}

@media (max-width: 520px) {
  footer {
    padding-bottom: 80px;
  }
  /* 詳細ページ
インタビューのみの場合は、エントリーボタンを非表示 */
  .not_recruiting a.f-fix-rec.recbtn {
    display: none;
  }
}
/** ==============================================
採用TOPページ
============================================== **/
.rec-top-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(from var(--c_sub) r g b / 0.4);
  mix-blend-mode: multiply;
}
.rec-top-hero img {
  width: 100%;
  aspect-ratio: 5/2;
  object-fit: cover;
}
.rec-top-hero .hero-catch {
  width: 100%;
  font-size: 3rem;
  font-weight: var(--fw_b);
  z-index: 2;
}

@media (max-width: 520px) {
  .rec-top-hero img {
    aspect-ratio: 3/4;
  }
  .rec-top-hero .hero-catch {
    font-size: min(5.5vw, 2.4rem);
  }
  .rec-top-hero .hero-catch strong {
    font-size: min(10.5vw, 4.4rem);
  }
}

/* -------------------------------------
sec-rec-top-intro
-------------------------------------*/
@media (max-width: 520px) {
  .sec-rec-top-intro p {
    padding-inline: 5%;
  }
  .sec-rec-top-intro p .tit {
    font-size: min(5.4vw, 2.4rem);
  }
}

/* -------------------------------------
sec-ourjob
-------------------------------------*/
.ourjob-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
.ourjob-content li {
  align-items: center;
}
.ourjob-content li img {
  width: 49%;
  aspect-ratio: 5/4;
  object-fit: cover;
}
.ourjob-content li .text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}
.ourjob-content li .text b {
  display: block;
  font-weight: var(--fw_b);
}

/* てれこ */
.ourjob-content li:nth-child(even) {
  flex-direction: row-reverse;
}

@media (max-width: 520px) {
  .ourjob-content {
    gap: 40px;
  }
  .ourjob-content li {
    flex-direction: column-reverse;
    gap: 20px;
  }
  .ourjob-content li img {
    width: 100%;
    aspect-ratio: 5/4;
  }
  .ourjob-content li .text {
    gap: 15px;
    padding: 0 3%;
  }

  /* てれこ */
  .ourjob-content li:nth-child(even) {
    flex-direction: column-reverse;
  }
}

/* -------------------------------------
sec-strengths
-------------------------------------*/
.grid_strengths-list li {
  background: #fff;
}
.grid_strengths-list .jisseki-dl {
  margin-top: 0;
  margin-bottom: 10px;
  background: none;
}
.grid_strengths-list .jisseki-dl dt {
  padding: 5px 20px;
}
.grid_strengths-list .jisseki-dl dd {
  display: block;
  padding: 5px 20px;
}
.grid_strengths-list .jisseki-dl dd::before {
  display: none;
}

@media (max-width: 520px) {
  .grid_strengths-list {
    --gap: 20px;
    padding: 0 3%;
  }
  .grid_strengths-list .jisseki-dl {
    font-size: 1.4rem;
  }
  .grid_strengths-list .jisseki-dl dt {
    padding: 8px 20px;
  }
}

/* -------------------------------------
sec-benefits
-------------------------------------*/
.benefits-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-template-areas:
    "li01 li01 li01 li02 li02 li02 "
    "li03 li03 li04 li04 li05 li05 ";
  gap: 50px 30px;
  font-size: 1.5rem;
}
.benefits-list li:first-child {
  grid-area: li01;
}
.benefits-list li:nth-child(2) {
  grid-area: li02;
}
.benefits-list li:nth-child(3) {
  grid-area: li03;
}
.benefits-list li:nth-child(4) {
  grid-area: li04;
}
.benefits-list li:last-child {
  grid-area: li05;
}

@media (max-width: 520px) {
  .benefits-list {
    --num: 2;
    --gap: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 25px var(--gap);
    padding: 0;
  }
  .benefits-list li {
    width: calc((100% - var(--gap) * calc(var(--num) - 1)) / var(--num));
    font-size: 1.2rem;
  }
  .benefits-list li strong.tit_s {
    font-size: 1.7rem;
  }
}

/* -------------------------------------
sec-top-interview
-------------------------------------*/
.grid_top-interview-list {
  --grid: 2;
  --gap: 20px;
}
.grid_top-interview-list li {
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 15px;
  padding: 20px;
  font-size: 0.9em;
  line-height: 1.7;
  background: #fff;
}
.grid_top-interview-list li figure img {
  aspect-ratio: 3/2;
  object-fit: cover;
}
.grid_top-interview-list li .text {
  padding-left: 8px;
  position: relative;
}
.grid_top-interview-list li .text p strong {
  display: block;
  font-size: 1.8em;
  margin-bottom: 0.2em;
}
.grid_top-interview-list li .text p b {
  display: block;
  font-size: 0.6em;
}
.grid_top-interview-list li .text p span {
  display: block;
  margin-bottom: 0.2em;
}
.grid_top-interview-list li .text .btn {
  margin-top: 10px;
  position: absolute;
  right: 0;
  top: 0;
}

@media (max-width: 520px) {
  .grid_top-interview-list {
    --grid: 1;
    gap: 14px 0;
  }
  .grid_top-interview-list li {
    display: flex;
    gap: 10px 20px;
    padding: 15px 15px 20px;
  }
  .grid_top-interview-list li figure {
    width: 40%;
  }
  .grid_top-interview-list li figure img {
    aspect-ratio: 1/1;
  }
  .grid_top-interview-list li .text {
    flex: 1;
  }
  .grid_top-interview-list li .text p {
    font-size: 0.95em;
  }
  .grid_top-interview-list li .text p span {
    margin-bottom: 0;
    font-size: 1.1em;
  }
  .grid_top-interview-list li .text .btn {
    --height: 40px;
    width: 90%;
    margin: 12px 0 0;
    font-size: 1.2rem;
    position: static;
  }
}

/* -------------------------------------
sec-welcom
-------------------------------------*/
@media screen and (min-width: 521px) {
  .welcom-slide-wrap,
  .welcom-slide-wrap .splide__track {
    visibility: visible;
    overflow: visible;
  }
  .welcom-list {
    display: grid !important;
  }
}

.welcom-list {
  grid-template-columns: 1fr;
  gap: 10px;
}
.welcom-list li {
  display: grid;
  grid-template-columns: 150px 1fr;
  align-items: center;
  gap: 30px;
  padding: 15px 30px;
  background: #fff;
  position: relative;
  counter-increment: num 1;
}
.welcom-list li img {
  width: 100%;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}
.welcom-list li p strong {
  display: flex;
  align-items: baseline;
  gap: 15px;
}
.welcom-list li p strong::before {
  flex-shrink: 0;
  content: counter(num, decimal-leading-zero); /* 10未満は頭に0がつく */
  font-family: var(--font_en);
  font-size: 4em;
  font-weight: 400;
  line-height: 1;
  background: linear-gradient(180deg, var(--c_grd_yellow_top) 0%, var(--c_grd_yellow_bottom) 100%);
  background: linear-gradient(-90deg, var(--c_grd_blue_top) 0%, var(--c_grd_blue_bottom) 64%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@media (max-width: 520px) {
  .sec-welcom .wbase {
    width: 100%;
  }
  .welcom-list li {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: 20px;
    padding: 30px 30px 20px;
    font-size: 1.3rem;
  }
  .welcom-list li img {
    width: 45%;
  }
  .welcom-list li p strong {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 5px;
  }
  .welcom-list li p strong::before {
    display: none;
    /* margin-top: -15px;
    font-size: 4em; */
  }
}

/* -------------------------------------
sec-rec-message
-------------------------------------*/
.sec-rec-message .msg-content {
  flex-direction: row-reverse;
}

@media (max-width: 520px) {
  .sec-rec-message .msg-content {
    flex-direction: column-reverse;
  }
}
/* -------------------------------------
sec-joinus
-------------------------------------*/
.joinus-content .text {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media (max-width: 520px) {
  .joinus-content {
    gap: 10px;
  }
  .joinus-content .text {
    padding: 0 4%;
  }
  .joinus-content .text .tit {
    font-size: min(5.5vw, 2.5rem);
  }
}

/* -------------------------------------
top-recruit
-------------------------------------*/
.recruit-list {
  border-top: var(--border);
}
.recruit-list li {
  display: grid;
  grid-template-columns: 30% auto;
  gap: 5%;
  padding-block: 30px;
  border-bottom: var(--border);
}
.recruit-list li figure img {
  aspect-ratio: 3/2;
  object-fit: cover;
}
.recruit-list li .rec-point {
  margin: 30px 0 0;
}
@media (max-width: 520px) {
  .recruit-list li {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 30px 3%;
  }
  .recruit-list li p {
    font-size: 1.4rem;
  }
  .recruit-list li a.btn {
    margin-inline: auto;
  }
}

/** ==============================================
採用詳細
============================================== **/
/* -------------------------------------
rec-fv
-------------------------------------*/
.sec-rec-fv {
  padding-top: 50px;
}
.rec-fv {
  padding-left: 15%;
  display: grid;
  grid-template-columns: 40% auto;
  gap: 5%;
}
.rec-fv .text {
  font-size: 1.5rem;
}
.rec-fv figure img {
  aspect-ratio: 3/2;
  object-fit: cover;
}

@media (max-width: 520px) {
  .sec-rec-fv {
    padding-top: 0;
  }
  .rec-fv {
    padding-left: 0;
    grid-template-columns: 1fr;
    gap: 5%;
  }
  .rec-fv .text {
    order: 2;
    margin: 0 5%;
  }
  .rec-fv .text .tit.mb50 {
    margin-bottom: 25px;
  }
  .rec-fv figure {
    order: 1;
  }
}

/* rec-point */
.rec-point {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em;
}
.rec-point span {
  padding: 0.7em;
  color: #fff;
  font-size: 0.9em;
  line-height: 1;
  background: var(--c_main);
  border: 1px solid var(--c_main);
}

@media (max-width: 520px) {
}
/* -------------------------------------
rec-intro
-------------------------------------*/
.sec-rec-intro p {
  font-weight: var(--fw_b);
  text-align: center;
}

@media (max-width: 520px) {
  .sec-rec-intro .tit-horizon_wh {
    padding-bottom: 15px;
    border-bottom: 1px solid currentColor;
  }
  .sec-rec-intro p {
    text-align: left;
  }
}

/* -------------------------------------
rec-interview
-------------------------------------*/
.sec-rec-interview {
  --bg_img: url(../images/deco-circle.png);
  --bg_size: var(--base_width) auto;
  --bg_size: 78% auto;
  background: var(--bg_img) no-repeat center top -115% / var(--bg_size);
  background: var(--bg_img) no-repeat center top -38vw / var(--bg_size);
}

/* interview-head */
.interview-head {
  display: flex;
  align-items: center;
  gap: 5%;
  margin-bottom: 60px;
}
.interview-head figure {
  width: 55%;
}
.interview-head .text {
  flex: 1;
  font-size: 1.4rem;
  line-height: 2;
}
.interview-head .text strong {
  display: block;
  margin-bottom: 20px;
  padding-bottom: 6px;
  font-size: 2.2em;
  border-bottom: 1px solid currentColor;
}
.interview-head .text strong b {
  display: block;
  font-size: 0.6em;
}

/* interview-content */
.interview-content {
  clear: both;
  overflow: auto;
}
.interview-content figure {
  width: 40%;
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}
.interview-content figure.img01 {
  float: right;
  margin: 0 0 20px 60px;
}
.interview-content figure.img02 {
  float: left;
  margin: 20px 60px 60px 0;
}

@media (max-width: 520px) {
  .sec-rec-interview {
    --bg_size: 150% auto;
    background-position: center top -5%;
  }
  /* interview-head */
  .interview-head {
    flex-direction: column;
    gap: 0;
    margin-bottom: 15px;
  }
  .interview-head figure {
    width: 100%;
  }
  .interview-head .text {
    padding: 20px;
    font-size: 1.3rem;
    background: var(--bg_main);
  }
  .interview-head .text strong {
    margin-bottom: 10px;
    padding-bottom: 12px;
    font-size: 2em;
    line-height: var(--lh_s);
  }
  .interview-head .text strong b {
    font-size: 0.7em;
  }

  /* interview-content */
  .interview-content {
    display: flex;
    flex-direction: column-reverse;
  }
  .interview-content figure.img01,
  .interview-content figure.img02 {
    width: 80%;
    float: none;
    margin: 15px 0 20px 54px;
  }
}

/* interview-dl */
.interview-dl {
  display: block;
}
.interview-dl dl {
  padding: 20px 0;
  font-size: 1.5rem;
}
.interview-dl dt {
  display: grid;
  grid-template-columns: 2em auto;
  align-items: center;
  gap: 0.5em;
  margin-bottom: 10px;
  font-size: 1.1em;
  font-weight: var(--fw_b);
  line-height: var(--lh_s);
}
.interview-dl dt::before {
  content: "Q";
  font-family: var(--font_en);
  font-weight: 400;
  font-size: 2em;
  color: var(--c_main);
  line-height: 1;
}
.interview-dl dd {
  display: grid;
  padding-left: 40px;
}

@media (max-width: 520px) {
  /* interview-dl */
  .interview-dl dl {
    padding: 15px 10px 10px;
  }
  .interview-dl dt {
    margin-bottom: 6px;
    font-size: 1em;
  }
  .interview-dl dt::before {
    line-height: 1.4;
  }
}

/* interview-ceo */
.interview-ceo-content {
  margin-top: 30px;
  padding: 20px 50px;
  color: #fff;
  background: var(--c_main);
}
.interview-ceo {
  flex-direction: row-reverse;
  align-items: center;
}
.interview-ceo img {
  width: 180px;
  aspect-ratio: 1/1;
  object-fit: cover;
  border-radius: 50%;
  overflow: hidden;
}
.interview-ceo .text strong {
  padding-bottom: 10px;
  border-bottom: 1px solid currentColor;
}

@media (max-width: 520px) {
  .interview-ceo-content {
    padding: 20px;
  }
  .interview-ceo {
    display: block;
    clear: both;
  }
  .interview-ceo img {
    width: 90px;
    float: right;
    margin: 0 0 10px 20px;
    translate: 1px 0;
  }
  .interview-ceo .text {
    padding-top: 20px;
    font-size: 0.9em;
  }
}

/* -------------------------------------
sec-rec-timetable
-------------------------------------*/
.box-timetable {
  display: grid;
  grid-auto-rows: auto;
  grid-template-columns: 1fr 300px;
  grid-template-areas: "dl pic";
  gap: 20px 40px;
  align-items: start;
}
.box-timetable dl {
  grid-area: dl;
}
.box-timetable dl :is(dt, dd) {
  background: var(--bg_main);
  padding: 10px 20px;
}
.box-timetable dl dt {
  padding-bottom: 0;
  font-weight: var(--fw_b);
}
.box-timetable dl dd {
  padding-top: 6px;
  margin: 0 0 30px;
  position: relative;
}
.box-timetable dl dd:before {
  content: "▼";
  display: block;
  color: var(--c_main);
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.box-timetable dl dd:last-child:before {
  display: none;
}
.box-timetable dl dd img {
  display: none;
}
.box-timetable .picture {
  grid-area: pic;
}
.box-timetable .picture img {
  width: 100%;
  margin: 0 0 5px;
}

@media screen and (max-width: 520px) {
  .box-timetable {
    display: block;
  }
  .box-timetable dl dt {
    font-size: 1.6rem;
  }
  .box-timetable dl dd {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    font-size: 0.9em;
  }
  .box-timetable dl dd img {
    display: block;
    width: 30%;
    flex-shrink: 0;
  }

  .box-timetable .picture {
    display: none;
  }
}

/* -------------------------------------
rec-summary
-------------------------------------*/

/* -------------------------------------
rec-entry
-------------------------------------*/
.form.content-box {
  padding: 50px;
  background: #fff;
}

@media (max-width: 520px) {
  .form.content-box {
    padding: 30px;
  }
}