@charset "UTF-8";

/* ==== root ========================== */
:root {
  --color-black: #231815;
  --color-white: #ffffff;
  --color-primary: #0fff00;
  --color-subPrimary: #533fdf;
  --color-pink: #ff009d;

  --noto-sans: "Noto Sans JP", serif;
  --zen-kaku: "Zen Kaku Gothic New", serif;
  --helvetica: "Helvetica", sans-serif;
  --helvetica-b: "Helvetica-B", sans-serif;
}

/*================================================
 *  header
 ================================================*/
header .nav__left a {
  display: flex;
  align-items: end;
  color: var(--color-white);
  font-size: 2.1rem;
  font-weight: bold;
  gap: 1rem;
  color: var(--color-white);
  line-height: 1;
}

header.changeNav .nav__left a {
  color: var(--color-black);
}

@media screen and (max-width:767px) {
  header {
    background: var(--color-white);
  }

  header .nav__left a h1::before {
    opacity: 1;
  }

  header .nav__left h1 img {
    opacity: 0;
  }

  header .nav__left a {
    color: var(--color-black);
  }

  .hamburger__line {
    background-color: var(--color-black);
  }
}

/*================================================
 *  mainVisual
 ================================================*/
#mainVisual {
  width: 100%;
  height: 100%;
  aspect-ratio: 1200/600;
  background: url(../../images/recruit/mv.jpg) no-repeat center/cover;
  padding: 0;
}

#mainVisual .narrow {
  width: 79%;
}

#mainVisual h3 {
  width: 24.4vw;
  position: relative;
  z-index: 2;
  padding-top: 15vw;
  margin-left: 3vw;
}

#mainVisual h2:first-of-type {
  margin: 0.7vw 0 2.2vw;
}

#mainVisual h2 span {
  font-size: 3.666vw;
  color: var(--color-white);
  font-weight: bold;
  padding: 0.35vw 2.5rem;
}

#mainVisual h2 span span {
  background: rgb(83, 63, 223);
  background: linear-gradient(45deg, rgba(83, 63, 223, 1) 0%, rgba(35, 24, 21, 1) 50%, rgba(255, 255, 106, 1) 100%);
}

#mainVisual h2 span::before {
  background: rgb(83, 63, 223);
  background: linear-gradient(45deg, rgba(83, 63, 223, 1) 0%, rgba(35, 24, 21, 1) 50%, rgba(255, 255, 106, 1) 100%);
  width: calc(100% - 5rem);
  left: 2.5rem;
}

@media screen and (max-width:767px) {
  #mainVisual {
    aspect-ratio: 600/417;
    background: url(../../images/recruit/mv_sp.jpg) no-repeat center/cover;
    margin-top: 12rem;
  }

  #mainVisual .narrow {
    width: 100%;
  }

  #mainVisual h3 {
    width: 20rem;
    padding-top: 12rem;
    margin-left: 3rem;
  }

  #mainVisual h2 span {
    font-size: 3rem;
    padding: 0.5rem 2.5rem;
  }

  #mainVisual h2:first-of-type {
    margin: 1rem 0 2.2rem;
  }
}

/*================================================
 *  fix_btn
 ================================================*/
#fix_btn {
  width: 15rem;
  right: 2rem;
  bottom: 2rem;
}

#fix_btn .close {
  display: block;
  margin-left: auto;
  width: 2.5rem;
}

@media screen and (max-width:767px) {
  #fix_btn {
    width: 27rem;
    right: 0rem;
    bottom: 0;
  }

  #fix_btn .close {
    width: 3.5rem;
  }
}


/*================================================
 *  r_message
 ================================================*/
#r_message {
  background: rgb(227, 255, 106);
  background: linear-gradient(45deg, rgba(227, 255, 106, 1) 0%, rgba(35, 24, 21, 1) 50%, rgba(83, 63, 223, 1) 100%);
}

#r_message .inner {
  width: 108rem;
  margin: 0 auto;
  padding-top: 13rem;
  position: relative;
}

#r_message .inner h2 {
  width: 40rem;
  position: absolute;
  z-index: 2;
  top: 5%;
  left: 41%;
}

.r_message02 {
  margin-top: 4rem;
}

.message__img {
  width: 54rem;
  position: relative;
}

.message__img div {
  position: absolute;
  top: 56%;
  left: 6%;
}

.r_message02 .message__img div {
  top: 41%;
}

#r_message div p.in_ani.obi {
  color: #73ffc6;
  margin-bottom: 0.3rem;
}


#r_message .r_message02 div p.in_ani.obi {
  color: #ffdb45;
}

#r_message div p.in_ani.obi span {
  display: block;
  background-color: var(--color-black);
  padding: 0.5rem 1rem;
}

#r_message div p.in_ani.obi::before {
  background-color: var(--color-black);
}


#r_message div h4.in_ani.obi {
  font-size: 3.2rem;
  color: var(--color-black);
  font-weight: bold;
  margin-bottom: 0.5rem;
}

#r_message div h4.in_ani.obi span {
  display: block;
  padding: 0.5rem 2rem;
}

#r_message div h4.in_ani.obi::before {
  background-color: var(--color-white);
}

#r_message div h4.in_ani.obi span {
  background-color: var(--color-white);
}

.message__txt {
  width: 49rem;
  color: var(--color-white);
  padding-top: 11rem;
}

.message__txt h3 span {
  display: block;
  font-size: 1.5rem;
  color: #73ffc6;
  font-weight: 500;
}

.r_message02 .message__txt h3 span {
  color: #ffdb45;
}

.message__txt h3 {
  font-size: 3.5rem;
  font-weight: 900;
  margin-bottom: 2rem;
}

/* .staff */
.staff {
  padding-top: 6rem;
}

#r_message .staff h2 {
  width: 52rem;
  margin: 0 auto 4rem;
  position: static;
}

.staff .staff__inner {
  width: 52rem;
}

.staff .staff__inner a {
  position: relative;
  overflow: hidden;
  aspect-ratio: 535/315;
  border-radius: 2rem;
  margin: 3rem 0;
}

.staff .staff__inner a div {
  position: absolute;
  left: 4%;
  top: 40%;
}

#r_message .staff .staff__inner a div p {
  margin-bottom: 1rem;
}

.staff .staff__inner a img {
  transition: .4s;
  border-radius: 2rem;
}

.staff .staff__inner a:hover img {
  transform: scale(1.1);
}

#r_message .staff div p.in_ani.obi.blue {
  color: #17e4ff;
}

#r_message .staff div p.in_ani.obi.gr {
  color: #73ff8c;
}

#r_message .staff div p.in_ani.obi.yr {
  color: #e4ff73;
}

@media screen and (max-width:767px) {
  #r_message .inner {
    width: 53rem;
    padding-top: 10rem;
  }

  #r_message .inner h2 {
    width: 26rem;
    top: 1.3%;
    left: -1%;
  }

  .message__img {
    width: 100%;
  }

  .message__img div,
  .r_message02 .message__img div {
    top: 56%;
  }

  .message__txt {
    width: 100%;
    padding-top: 2rem;
  }

  .staff {
    padding-top: 10rem;
  }

  #r_message .staff h2 {
    width: 42rem;
    margin-bottom: 2rem;
  }

  .staff .staff__inner {
    width: 100%;
  }
}

/*================================================
 *  modal
 ================================================*/
/* bodyにhiddenクラスが付いているときはスクロールを無効に */
body.hidden {
  overflow: hidden;
}

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(35, 24, 21);
  background: linear-gradient(45deg, rgba(35, 24, 21, 0.85) 57%, rgba(227, 255, 106, 0.85) 100%);
  justify-content: center;
  align-items: center;
  transition: opacity 1s ease, visibility 1s ease;
  overflow-y: visible;
}

.modal .close {
  position: absolute;
  top: 3rem;
  right: 3rem;
  font-size: 3rem;
  background: var(--color-white);
  width: 6rem;
  height: 6rem;
  display: grid;
  place-content: center;
  border-radius: 1000px;
  cursor: pointer;
  z-index: 1;
}

.modal.show {
  opacity: 1;
  visibility: visible;
}

.modal-content {
  width: 110rem;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  color: var(--color-white);
}

/* modal__left */
.modal__left {
  width: 50rem;
  position: sticky;
  top: 0;
  height: auto;
}

.modal__left--inner {
  margin-top: calc((100vh - 50rem)/2);
}

/* .modal__right */
.modal__right {
  width: 52rem;
  height: 100vh;
  overflow-y: auto;
  scrollbar-width: none;
  padding-bottom: 16rem;
}

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

.modal__ttl {
  padding-top: 16rem;
  margin-bottom: 10rem;
}

.modal__ttl h4 {
  font-size: 1.7rem;
  margin-bottom: 1rem;
}

.modal__ttl h3.in_modal.obi span {
  font-size: 2.7rem;
  background: var(--color-black);
  color: #17e4ff;
  display: block;
}

.modal__ttl h3.in_modal.obi.gr span {
  color: #73ff8c;
}

.modal__ttl h3.in_modal.obi.yr span {
  color: #e4ff73;
}

.modal__ttl h3.in_modal.obi::before {
  background: var(--color-black);
}

.modal__ttl p {
  font-size: 1.5rem;
  margin: 1rem 0 6rem;
}

.modal__ttl h2.in_modal.obi span {
  font-size: 5.2rem;
  font-weight: bold;
  background: var(--color-white);
  color: var(--color-black);
  display: block;
}

.modal__ttl h2.in_modal.obi::before {
  background: var(--color-white);
}

.modal__txt h3 {
  font-family: var(--noto-sans);
  font-size: 3.5rem;
  font-weight: bold;
  margin-top: 5rem;
  margin-bottom: 3rem;
}


.modal__message {
  margin: 6rem 0;
}

.modal__circle {
  font-size: 2.1rem;
  color: #17e4ff;
  background: var(--color-black);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1000px;
  width: 80%;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  top: 3rem;
  padding: 1rem 0;
  border: 0.2rem solid var(--color-white);
}

.modal__circle.gr {
  color: #73ff8c;
}

.modal__circle.yr {
  color: #e4ff73;
}


.modal__circle img {
  width: 3rem;
  margin-right: 1rem;
}

.modal__card {
  padding: 5rem 3rem 2rem;
  border-radius: 1rem;
  color: var(--color-black);
  background: var(--color-white);
  line-height: 2;
  font-size: 1.4rem;
}

.modal__day .modal__circle {
  background: #17e4ff;
  border: 0.2rem solid var(--color-black);
  color: var(--color-black);
}

.modal__day .modal__circle.gr {
  background: #73ff8c;
}

.modal__day .modal__circle.yr {
  background: #e4ff73;
}

.modal__day ul {
  position: relative;
}

.modal__day ul::before {
  position: absolute;
  content: "";
  top: 3rem;
  bottom: 3rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-black);
  width: 0.2rem;
}

.modal__day ul li {
  width: 17rem;
  background: #eaeaea;
  padding: 1rem 1.5rem;
  border-radius: 0.7rem;
  line-height: 1.6;
  position: relative;
  z-index: 2;
}

.modal__day ul li:nth-child(even) {
  margin-left: auto;
}

.modal__day ul li::before {
  position: absolute;
  content: "";
  width: 5.7rem;
  border-top: 0.1rem dotted var(--color-black);
  top: 50%;
  right: -5.7rem;
  z-index: -1;
  transform: translateY(-50%);
}

.modal__day ul li:nth-child(even)::before {
  right: auto;
  left: -5.7rem;
}

.modal__day ul li:nth-child(1)::before {
  top: 3rem;
}

.modal__day ul li:last-child::before {
  top: auto;
  bottom: 3rem;
}

.modal__day ul li::after {
  position: absolute;
  content: "⚫︎";
  top: 50%;
  right: -6.7rem;
  transform: translateY(-50%);
}

.modal__day ul li:nth-child(even)::after {
  right: auto;
  left: -6.7rem;
}

.modal__day ul li:nth-child(1)::after {
  top: 3rem
}

.modal__day ul li:last-child::after {
  top: auto;
  bottom: 0.8rem;
}

.modal__right a {
  margin-top: 4rem;
}

@media screen and (max-width:767px) {
  .modal .close {
    top: 4rem;
    right: 1rem;
    font-size: 2rem;
    width: 4rem;
    height: 4rem;
  }
  .modal__card {
    font-size: 1.9rem;
  }

  .modal-content {
    width: 51rem;
    height: 100%;
    overflow: scroll;
    margin-left: auto;
    margin-right: auto;
    padding-top: 15rem;
  }

  .modal-content::-webkit-scrollbar {
    display: none;
  }

  /* modal__left */
  .modal__left {
    width: 50rem;
    height: 50rem;
    position: static;
  }

  .modal__left--inner {
    margin-top: 0;
  }

  .modal__right {
    width: 100%;
    height: auto;
    padding-bottom: 16rem;
  }

  .modal__ttl {
    padding-top: 2rem;
    margin-bottom: 6rem;
  }

  .modal__txt {
    width: 47rem;
    margin-left: auto;
    margin-right: auto;
  }

  .modal__day ul li {
    font-size: 1.5rem;
  }

  .modal__day ul li::before {
    width: 5.2rem;
    right: -5.2rem;
  }

  .modal__day ul li:nth-child(even)::before {
    right: auto;
    left: -5.2rem;
  }

  .modal__day ul li::after {
    right: -6.2rem;
  }

  .modal__day ul li:nth-child(even)::after {
    right: auto;
    left: -6.2rem;
  }
}



/*================================================
 *  overview
 ================================================*/
#overview {
  background: #f3f3f3;
}

#overview h2 {
  font-size: 3rem;
}

.overview__list {
  margin: 4rem auto 0;
}

.overview__list dl {
  border-top: 0.035rem solid #231815;
  font-family: var(--noto-sans);
  font-weight: 400;
  font-size: 1.6rem;
}

.overview__list dt {
  width: 16%;
  text-align: center;
  padding: 4rem 0;
  border-bottom: 0.035rem solid #231815;
  background: rgb(83 63 223 / 10%);
}

.overview__list dd {
  width: 84%;
  padding: 4rem;
  border-bottom: 0.035rem solid #231815;
  background: var(--color-white);
}


@media screen and (max-width:767px) {
  #overview h2 {
    font-size: 2.2rem;
  }

  .overview__list {
    overflow: scroll;
    width: 50rem;
    margin: 4rem auto 0;
  }

  .overview__list dl {
    min-width: 1000px;
  }

  .overview__list dt {
    width: 12%;
    padding: 2rem 0;
  }

  .overview__list dd {
    width: 88%;
    padding: 2rem;
  }
}



/*================================================
 *  entryArea
 ================================================*/
#entryArea h2 {
  font-size: 3rem;
  text-align: center;
}

#entryArea h3 {
  text-align: center;
  font-size: 2rem;
  background: #533fdf;
  color: var(--color-white);
  margin: 4rem 0 2rem;
}

.entry__not {
  text-align: center;
  margin-bottom: 6rem;
  font-size: 1.8rem;
}

.entry__list {
  display: grid;
  gap: 3rem;
  grid-template-columns: repeat(3, 1fr);
  margin-bottom: 6rem;
}


.entry__list a {
  background: #f3f3f3;
  padding: 1rem;
}

.entry__list a:hover {
  background: rgb(83 63 223 / 10%);
}

.entry__list h4 {
  font-size: 1.6rem;
  text-align: center;
  background: var(--color-white);
  padding: 0.5rem 0;
  width: 80%;
  margin: 2rem auto;
}


.entry__list a div {
  width: 90%;
  margin: 0 auto;
}

.entry__list h5 {
  background: #533fdf;
  color: var(--color-white);
  width: 7rem;
  height: 2.2rem;
  font-size: 1.2rem;
  border-radius: 10000px;
  display: grid;
  place-content: center;
}

.entry__list p {
  margin: 0.5rem 0 2rem;
}

.entry__list a img {
  overflow: hidden;
  object-fit: cover;
  font-family: 'object-fit: cover;';
  aspect-ratio: 303/217;
  height: 100%;
}

@media screen and (max-width:767px) {
  #entryArea .wrap {
    width: 50rem;
  }

  .entry__list {
    gap: 3rem;
    grid-template-columns: repeat(1, 1fr);
  }

  .entry__list a {
    padding: 1rem 1rem 10rem 1rem;
    position: relative;
  }

  .entry__list a::before {
    position: absolute;
    content: "more";
    width: 17rem;
    height: 5rem;
    background: #533fdf;
    color: var(--color-white);
    margin: 2rem auto 0;
    font-size: 1.8rem;
    display: grid;
    place-content: center;
    border-radius: 1000px;
    line-height: 1;
    left: 50%;
    transform: translateX(-50%);
    bottom: 4rem;
  }

  .entry__list h4 {
    font-size: 2.3rem;
    padding: 0.5rem 1rem;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin-left: 5%;
  }

  .entry__list h5 {
    background: transparent;
    color: #533fdf;
    width: auto;
    height: auto;
    font-size: 1.8rem;
    border-radius: 0;
    display: block;
    position: relative;
    padding-right: 1em;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
  }

  .entry__list h5::before {
    position: absolute;
    content: "｜";
    top: 0;
    right: 0;

  }

  .entry__list p {
    font-size: 2rem;
  }


}


/*================================================
 *  subVisual
 ================================================*/
#subVisual {
  height: 25rem;
}

#subVisual h2 {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#subVisual h2 span {
  display: block;
}

#subVisual h2 img {
  display: block;
  width: 14rem;
}

@media screen and (max-width:767px) {
  #subVisual h2 img {
    width: 11rem;
  }
}

/*================================================
 *  info
 ================================================*/
#info h2 {
  font-size: 2.4rem;
  background: #eeeeee;
  padding: 3rem 4rem;
  margin-bottom: 5rem;
}

.info__top img {
  width: 40rem;
  height: 100%;
  aspect-ratio: 400/286;
  overflow: hidden;
  object-fit: cover;
  font-family: 'object-fit: cover;';
}

.info__top ul {
  width: 50rem;
  border-top: 0.05rem solid #6b6c6c;
}

.info__top ul li {
  display: flex;
  align-items: center;
  padding: 2.5rem 2rem;
  font-family: var(--noto-sans);
  font-weight: 400;
  border-bottom: 0.05rem solid #6b6c6c;
}

.info__top ul li h3 {
  width: 6em;
  font-size: 1.7rem;
}

.info__top ul li p {
  font-size: 1.6rem;
}

.info__top ul li.small p {
  font-size: 1.5rem;
}

.red_btn {
  display: grid;
  place-content: center;
  width: 25rem;
  height: 6rem;
  color: var(--color-white);
  border-radius: 1000px;
  margin: 4rem auto 0;
  background: #ff0000;
  font-weight: bold;
  font-size: 1.9rem;
}

/* accordion */
.info__under {
  width: 80rem;
  margin: 6rem auto 0;
}

.info__under li {
  margin-bottom: 4rem;
}

#accordion .label {
  cursor: pointer;
  transition: .4s;
  position: relative;
  font-size: 2rem;
  border-bottom: 0.05rem solid #6b6c6c;
  padding-bottom: 0.5rem;
  margin-bottom: 1rem;
}

#accordion .label::before {
  position: absolute;
  content: "";
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  display: inline-block;
  background-image: url(../../images/recruit/acc_arrow.png);
  width: 2.7rem;
  height: 2.7rem;
  top: 50%;
  right: -4rem;
  transform: translateY(-50%);
  transition: .4s;
}

#accordion .label.open::before {
  transform: translateY(-50%) rotate(180deg);
}

#accordion .detail {
  display: none;
  font-size: 1.5rem;
}


@media screen and (max-width:767px) {
  #info h2 {
    margin: 0 auto 5rem;
    width: 55rem;
    padding: 2rem 4rem;
  }

  .info__top {
    justify-content: center;
  }

  .info__top ul {
    width: 48rem;
    margin-top: 4rem;
  }

  .info__under {
    width: 48rem;
    margin: 6rem auto 0;
  }

  .info__under li {
    width: 44rem;
  }

  .info__top ul li h3 {
    font-size: 1.9rem;
  }
  
  .info__top ul li p {
    font-size: 1.8rem;
  }
  
  .info__top ul li.small p {
    font-size: 1.7rem;
  }
}



/*================================================
 *  guide
 ================================================*/
#guide {
  background: #eeeeee;
}

#guide h2 {
  font-size: 2.3rem;
  font-family: var(--noto-sans);
}

#guide .overview__list dt {
  background: rgb(69 105 255 / 15%);
}

@media screen and (max-width:767px) {
  #guide h2 {
    width: 50rem;
    margin: 0 auto;
  }
}


/*================================================
 *  entry
 ================================================*/
#entry h3 {
  font-size: 2.5rem;
  text-align: center;
  margin-bottom: 6rem;
}

#entry * {
  font-family: var(--noto-sans);
}

@media screen and (max-width:767px) {
  #entry .form__list dt {
    width: 100%;
    border-bottom: none;
    padding-top: 0;
    padding-bottom: 1rem;
  }

  #entry .form__list dd {
    width: 100%;
    padding-top: 0;
  }
}



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

@media screen and (max-width:767px) {}



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

@media screen and (max-width:767px) {}


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

@media screen and (max-width:767px) {}


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

@media screen and (max-width:767px) {}