@charset "UTF-8";

:root {
  --accent-blue: #265bad;
  --light-blue: #dcf2f9;
  --transition: 0.3s ease-in-out;
  --font-accent: "Zen Maru Gothic", "Noto Sans JP", sans-serif;
}

/* =================================
メインビジュアル
================================= */

.main_visual {
  background-image:
    url(images/main_visual_bg01.webp),
    url(images/main_visual_bg02.webp);
  background-position:
    right top,
    left bottom;
  background-size: 50%;
  background-repeat: no-repeat;
}

.main_visual .container {
  position: relative;
  margin-top: 0.3rem;
}

.main_visual .staff01,
.main_visual .staff02 {
  position: absolute;
  max-width: 28vw;
}

.main_visual .staff01 {
  left: 1vw;
  top: 22vw;
}

.main_visual .staff02 {
  right: 1vw;
  top: 22vw;
}

.main_visual_catch {
  position: relative;
  z-index: 1000;
  padding: 2vw 0 3vw;
  font-family: var(--font-accent);
  font-size: min(4.5vw, 2.8rem);
  font-weight: 900;
  text-align: center;
  color: #ff5e33;
}

.st-text {
  margin-bottom: 1rem;
}

.st-text span {
  display: inline-block;
  padding-top: 0.5rem;
  font-size: min(10vw, 5rem);
  font-family: var(--font-accent);
  line-height: 1;
  opacity: 0;
  transform: translateY(20px);
}

.st-text span:first-child {
  padding-left: 0.5rem;
}

.st-text strong {
  color: #0b1da6;
}

.main_visual_catch span.w_bg {
  display: inline-block;
  margin: 0.5rem 0;
  padding: 0.3rem 0.4rem 0.4rem;
  background-color: #fff;
}

.main_visual_text {
  position: relative;
  z-index: 999;
  margin-bottom: 2rem;
  font-size: clamp(1.6vw, 2vw, 1.2rem);
  font-weight: 300;
  line-height: 1.8;
  text-align: center;
}

.main_visual_text span {
  font-family: var(--font-accent);
  display: inline;
  margin: 1rem 0;
  padding: 0.5rem;
}

.st-text02 {
  background: linear-gradient(120deg, #2f6fd6 0%, #333333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: clamp(4.2vw, 2vw, 1.2rem);
}

/* =================================
ナビゲーション
================================= */

.recruit_nav_area {
  background-image: linear-gradient(0deg, #009bdc, #2dc1f1 80%);
}

.recruit_nav {
  align-items: center;
  padding: 1rem 0.5rem 0.1rem;
}

.recruit_nav div a {
  display: grid;
  position: relative;
  grid-template-columns: 4fr 6fr;
  gap: 1rem;
  margin-bottom: 1rem;
  padding: 12px 12px 0 15px;
  font-family: var(--font-accent);
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.4;
  color: var(--accent-blue);
  background-color: #fff;
  border-radius: 15px;
  transition: var(--transition);
}

.recruit_nav div a::before {
  content: "";
  position: absolute;
  top: 0;
  right: 20px;
  bottom: 0;
  margin: auto;
  width: 20px;
  height: 20px;
  border-top: 2px solid var(--accent-blue);
  border-right: 2px solid var(--accent-blue);
  transform: rotate(45deg);
  transition: var(--transition);
}

.recruit_nav div a:hover {
  opacity: 0.8;
}

.recruit_nav div a:hover::before {
  right: 15px;
}

.recruit_nav div a span {
  display: inline-block;
  margin-top: 0.5rem;
  padding: 0.1rem 0.5rem 0.2rem;
  font-size: clamp(0.7rem, 1.6vw, 1.2rem);
  color: #fff;
  background-color: var(--main-blue);
  border-radius: 0.5rem;
}

.recruit_nav div a figure {
  margin: 0.5rem 0 1.5rem;
}
@media (max-width: 1200px) {

  .recruit_nav {
    min-height: 17vw;
  }
  .recruit_nav div.fadein {
    margin-top: -2rem;
  }

  .recruit_nav div a {
    grid-template-columns: 35% 1fr;
    gap: 1rem;
  }

}

@media (max-width: 870px) {

  .recruit_nav {
    min-height: auto;
  }
  .recruit_nav div.fadein {
    margin-top: -0;
  }

  .recruit_nav div a {
    grid-template-columns: 35% 1fr;
    gap: 1rem;
  }

}

/* =================================
紹介文
================================= */

.syoukai_area {
  padding-top: 0.1rem;
  padding-bottom: 1rem;
  background-color: var(--light-blue);
}

.top_syoukai {
  margin-top: 1rem;
  padding: 3rem 1rem 0.1rem;
  background-color: #fff;
  border-radius: 15px;
}

.top_syoukai h2 {
  margin: 1rem 0;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  text-align: center;
}

.top_syoukai h2 span {
  background: linear-gradient(transparent 70%, var(--yellow) 70%);
}

.top_syoukai div:last-child {
  position: relative;
  z-index: 999;
  order: 2;
}

.top_syoukai div:first-child {
  order: 1;
  margin-top: -3rem;
  padding: 1rem 0;
}

.top_syoukai .lead {
  padding: 1rem 0;
  font-family: var(--font-accent);
  font-size: clamp(1rem, 2vw, 1.4rem);
  font-weight: 400;
}

.appeal {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: -0.5rem;
  font-family: var(--font-accent);
  font-size: min(3.3vw, 1.2rem);
  text-align: center;
  color: var(--main-blue);
}

.appeal::before,
.appeal::after {
  content: "";
  width: 2px;
  height: 50px;
  background-color: var(--main-blue);
}

.appeal::before {
  margin-top: 10px;
  margin-right: 20px;
  transform: rotate(-35deg);
}

.appeal::after {
  margin-top: 10px;
  margin-left: 20px;
  transform: rotate(35deg);
}

/* =================================
エントリー
================================= */

.entry_area p {
  margin: -1rem 0 4rem;
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  font-weight: 700;
  line-height: 1.7;
  text-align: center;
  color: #333;
  letter-spacing: 0.03em;
}

.entry_area p span {
  position: relative;
  display: inline-block;
  margin: 0 0.15em;
  padding: 0 0.15em;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-weight: 800;
  z-index: 1;
}

.entry_area p span::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.15em;
  height: 0.4em;
  background: var(--yellow);
  z-index: -1;
}

.entry_area {
  margin: 5rem 0 4rem 0;
}

/* =================================
タブレット
================================= */

@media (min-width: 768px) {

  .recruit_nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    padding: 1.5rem 0 0.1rem;
  }

  .top_syoukai_container {
    display: grid;
    grid-template-columns: 5fr 5fr;
    gap: 1rem;
    margin: -2rem auto 1rem auto;
  }

}

/* =================================
PC
================================= */

@media (min-width: 900px) {

  .main_visual_catch {
    padding: 4vw 0 3vw;
  }

  .main_visual .staff01 {
    left: -3vw;
    top: 1vw;
  }

  .main_visual .staff02 {
    right: -3vw;
    top: auto;
    bottom: 3vw;
  }

  .st-text span {
    padding-bottom: 0.8rem;
    font-size: min(7.2vw);
  }

  .st-text span:first-child {
    padding-left: 1.5rem;
  }

  .main_visual_catch span.w_bg {
    padding: 0.5rem 1rem 0.8rem;
  }

  .main_visual_text {
    line-height: 2;
  }

  .recruit_nav div a {
    gap: 1.5rem;
    margin-bottom: -1rem;
  }

  .recruit_nav div a::before {
    right: 30px;
  }

  .recruit_nav div a:hover::before {
    right: 25px;
  }

  .top_syoukai {
    margin: 4rem auto 1rem;
    padding: 3rem 3rem 0.5rem;
    border-radius: 30px;
  }

  .top_syoukai div:first-child {
    margin-top: 0.5rem;
    padding: 0 1rem 2rem;
    border-radius: 30px;
  }

  .top_syoukai div:last-child {
    border-radius: 30px;
  }

  .top_syoukai.seizo div:first-child {
    order: 2;
  }

  .top_syoukai.seizo div:last-child {
    order: 1;
  }

}

/* =================================
large PC
================================= */

@media (min-width: 1025px) {

  .main_visual .container {
    margin: 0.3rem auto;
    width: 88vw;
  }

}

@media (max-width: 600px) {

  .recruit_nav div a {
  }

}