@charset "utf-8";


.front_main {
  width: 100%;
  overflow-x: hidden;
}

/* --------メイン動画-------- */
.front_mainvisual {
  width: 122.6rem;
  height: 66.6rem;
  margin: 2.7rem 2.7rem 0;
  border-radius: 2.9rem;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.utari_vertical_logo>video {
  /* width: 100%;
  height: 100%; */
}

.utari_main_video {
  width: 122.6rem;
  height: 66.6rem;
  border-radius: 2.9rem;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
}

.utari_vertical_logo {
  width: 16.5rem;
  height: auto;
  z-index: 2;
  position: relative;
  bottom: 1rem;
}

/* ----利用者スタッフ募集---- */
.opening_recruit_box {
  border: .2rem solid var(--moss);
  border-left: none;
  width: 43.7rem;
  height: 12.6rem;
  padding: 1.6rem 1.8rem;
  background-color: white;
  position: absolute;
  left: -2.7rem;
  bottom: -2.7rem;
  font-size: 1.7rem;
  line-height: 2.5rem;
  font-weight: 500;
  z-index: 10;
}

.opening_message {
  color: var(--moss);
}

.opening_message .emoji {
  display: none !important;
}

.for_prospects {
  display: flex;
  gap: 1.5rem;
  margin-top: 1rem;
}

.for_user {
  width: 18.6rem;
  height: 3rem;
  background-color: #79C49D;
  border: .1rem solid var(--moss);
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  box-shadow: 0 .3rem .6rem #00000029;
}

.for_applicant {
  width: 20rem;
  height: 3rem;
  background-color: #C8DD6D;
  color: var(--moss);
  border: .1rem solid var(--moss);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 .3rem .6rem #00000029;
}


/* --------UTARIとはセクション-------- */

.about_utari_section {
  width: 100%;
  height: 84.5rem;
  background-color: #FCFFF6;
  position: relative;
}

/* ----画像群---- */
.portrait_image {
  width: 19.1rem;
  height: 25.4rem;
  border-radius: .9rem;
  position: absolute;
  overflow: hidden;
}

.landscape_image {
  width: 25.7rem;
  height: 18.9rem;
  border-radius: .9rem;
  position: absolute;
  overflow: hidden;
}

.room_image {
  top: 11.5rem;
  left: 15.2rem;
}

.forest_image {
  top: 5.8rem;
  left: 44.6rem;
}

.road_image {
  top: 10rem;
  right: 20.8rem;
}

.bird_image {
  top: 48.1rem;
  left: 11.4rem;
}

.representatives_image {
  top: 55.8rem;
  left: 52.8rem;
}

.bear_image {
  width: 39.62rem;
  height: 31.74rem;
  position: absolute;
  top: 42.96rem;
  right: 6.08rem;
}

/* ----UTARIとは文章---- */
.about_utari_text {
  position: absolute;
  top: 29rem;
  left: 43.4rem;
  width: 44.5rem;
}

.about_utari_headline {
  color: var(--moss);
  font-size: 2.4rem;
  height: 3.5rem;
  font-weight: bold;
}

.small_text {
  font-size: 1.2rem;
  line-height: 1em;
  position: relative;
  top: .3rem;
}

.utari_introduction {
  color: #333333;
  font-size: 1.5rem;
  line-height: 2.1rem;
  position: relative;
  top: 4.5rem;
}


/* --------お仕事内容セクション-------- */

.job_description_section {
  padding-top: 6.1rem;
  background-color: #FDFAF6;
}

.utari_headlines {
  font-size: 3.2rem;
  line-height: 4.6rem;
  font-weight: bold;
}

.job_headline {
  color: var(--moss);
  text-align: center;
}

/* ----スライドショー---- */
.swiper {
  margin: 5.709rem auto 0;
  position: relative;
}

.swiper-slide {
  width: 65rem;
  height: fit-content;
  margin: 0 auto;
  opacity: 0 !important;
}

.swiper-slide-active {
  opacity: 1 !important;
}

.swiper-wrapper {
  position: relative;
}

.job_image_box {
  width: fit-content;
  height: fit-content;
  margin: 0 auto;
  position: relative;
}

.job_image {
  width: 65rem;
  height: 36.983rem;
  border-radius: 1rem;
  overflow: hidden;
  position: relative;
}

.job_category {
  width: 25.2rem;
  height: 3.7rem;
  font-size: 2rem;
  line-height: 2.9rem;
  color: white;
  background-color: var(--moss);
  display: flex;
  align-items: center;
  justify-content: start;
  padding-left: 1.1rem;
  position: absolute;
  left: -3rem;
  bottom: -.6rem;
  font-weight: 400;
}

.job_category::after {
  content: "";
  background-color: var(--moss);
  width: 1.43rem;
  height: 100%;
  position: absolute;
  right: -1.43rem;
  top: 0;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.job_description {
  width: fit-content;
  max-width: 61.5rem;
  height: fit-content;
  font-size: 1.6rem;
  margin: 3.5rem auto 0;
  color: #333333;
}

/* ----スライダーのボタン---- */
.swiper_button_wrapper {
  position: absolute;
  width: 4.355rem !important;
  height: 4.355rem !important;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 16.313rem;
  left: 24.845rem;
  z-index: 100;
  line-height: 0;
}

.wrapper_for_position {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 0;
}

.next_button_wrapper {
  left: 98.8rem;
}

.swiper_button {
  position: relative !important;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: .1rem solid transparent;
  background: linear-gradient(120deg, #E0D367, #7EC8B6) border-box;
  -webkit-mask:
    linear-gradient(#fff 0 0) padding-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  background-clip: border-box;
  line-height: 0;
  margin: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
}

.swiper-button-next::after,
.swiper-button-prev::after {
  content: none !important;
  display: none !important;
}

.swiper-button-next {
  background: linear-gradient(-120deg, #E0D367, #7EC8B6) border-box;
}

.swiper_button_bar {
  width: 2.278rem;
  height: .1rem;
  background: linear-gradient(to right, #E0D367, #7EC8B6) !important;
  position: absolute;
}

.next_button_bar {
  background: linear-gradient(to left, #E0D367, #7EC8B6) !important;
}

.swiper_button_bar::before {
  content: "";
  width: 1.153rem;
  height: .1rem;
  background: linear-gradient(to right, #E0D367, #7EC8B6) !important;
  position: absolute;
  bottom: .4075rem;
}

.prev_button_bar::before {
  left: -.2rem;
  transform: rotate(-45deg);
}

.next_button_bar::before {
  right: -.2rem;
  bottom: .4075rem;
  transform: rotate(45deg);
  background: linear-gradient(to left, #E0D367, #7EC8B6) !important;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  content: "" !important;
  display: none !important;
  opacity: 0 !important;
}

/* ----IT研修---- */
.about_workshop {
  width: 100%;
  height: 72rem;
  margin-top: 10.3rem;
  position: relative;
}

.about_workshop_text {
  position: relative;
  top: 12.1rem;
  left: 14.2rem;
  width: fit-content;
}

.workshop_headline {
  font-size: 2.5rem;
  line-height: 3.6rem;
  font-weight: bold;
  color: var(--moss);
  width: fit-content;
}

.front_links {
  width: 25rem;
  height: 4.4rem;
  font-size: 1.6rem;
  font-weight: 500;
  padding-left: 1rem;
  display: flex;
  align-items: center;
  justify-content: start;
  gap: 2rem;
  position: relative;
  transition-duration: .5s;
}

.front_links:hover {
  gap: 2rem;
}

.front_links::before {
  content: "";
  width: 1.5rem;
  height: .1rem;
  display: block;
  position: relative;
  left: 1rem;
  transition-duration: .3s;
}

.front_links:hover:before {
  width: 3rem;
}

.front_links::after {
  content: "";
  width: 1.7rem;
  height: 4.4rem;
  position: absolute;
  right: -1.7rem;
  bottom: 0;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.link_to_about {
  background-color: var(--moss);
  padding: 1rem 0;
  color: white;
  margin-top: 5rem;
}

.link_to_about::before {
  background-color: white;
}

.link_to_about::after {
  background-color: var(--moss);
}

.workshop_text {
  font-size: 1.6rem;
  color: #333333;
  margin-top: 3rem;
}

.workshop_monitor_image {
  width: 24.5rem;
  height: 23.8rem;
  position: absolute;
  top: 32.4rem;
  left: 46.7rem;
  border-radius: 1rem;
  overflow: hidden;
}

.workshop_discussion_image {
  width: 46rem;
  height: 32.7rem;
  border-radius: 1rem;
  overflow: hidden;
  position: absolute;
  top: 7.9rem;
  right: 8rem;
}


/* --------お知らせ・ブログセクション-------- */

.blog_section {
  width: 100%;
  height: 72rem;
  background-color: var(--moss);
  padding-top: 8.9rem;
}

.blog_section_title {
  display: flex;
  gap: 5rem;
  margin-left: 8rem;
  align-items: center;
}

.blog_headline {
  color: white;
}

.link_to_blog {
  background-color: white;
  color: var(--moss);
  padding-left: 0;
}

.link_to_blog::before {
  background-color: var(--moss);
}

.link_to_blog::after {
  background-color: white;
}

/* ----ブログ記事一覧---- */
.blog_articles_area {
  width: 112rem;
  margin: 9.4rem auto 0;
  display: flex;
  justify-content: start;
  gap: 4.66666rem;
}

.blog_article {
  width: 24.5rem;
  color: white;
  font-weight: bold;
}

.blog_image {
  width: 24.5rem;
  height: 24.5rem;
  border-radius: 1rem;
  overflow: hidden;
}

.blog_title {
  font-size: 1.8rem;
  line-height: 2.6rem;
  margin-top: 1.5rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.blog_fundamental_data {
  display: flex;
  gap: 1.5rem;
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: .6rem;
}

.blog_image>.top_news_css {
  object-fit: contain;
}


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

  .pc_only {
    display: none;
  }

  .front_main {
    width: 100%;
    overflow-x: hidden;
  }

  /* --------メイン動画-------- */
  .front_mainvisual {
    width: 34.7rem;
    height: 66.6rem;
    margin: 1.4rem 1.4rem 0;
    padding: 0;
    border-radius: 2.9rem;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .utari_main_video {
    object-fit: cover;
    width: 100%;
    height: 100%;
    border-radius: 2.9rem;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }

  .utari_vertical_logo {
    width: 14.5rem;
    height: auto;
    z-index: 2;
    bottom: 0
  }

  /* ----利用者スタッフ募集---- */
  .opening_recruit_box {
    border: .2rem solid var(--moss);
    width: 37.5rem;
    height: 11.1rem;
    padding: 1rem 1.2rem 1.2rem .85rem;
    background-color: white;
    position: absolute;
    left: -1.4rem;
    bottom: -11.6rem;
    font-size: 1.7rem;
    line-height: 2.5rem;
    font-weight: 500;
    z-index: 10;
  }

  .opening_message {
    color: var(--moss);
  }

  .opening_message .emoji {
    display: none !important;
  }

  .for_prospects {
    display: flex;
    gap: .8rem;
    margin-top: .8rem;
  }

  .for_user {
    width: 16.5rem;
    font-size: 1.5rem;
    line-height: 2.1rem;
    color: white;
  }

  .for_applicant {
    width: 17.9rem;
    font-size: 1.5rem;
    line-height: 2.1rem;
  }


  /* --------UTARIとはセクション-------- */

  .about_utari_section {
    width: 100%;
    height: 94.33rem;
    background-color: #FCFFF6;
    position: relative;
    margin-top: 14.795rem;
    margin-bottom: 4.976rem;
  }

  /* ----画像群---- */
  .portrait_image {
    width: 16.1rem;
    height: 21.41rem;
    border-radius: .9rem;
    position: absolute;
    overflow: hidden;
  }

  .landscape_image {
    width: 21rem;
    height: 15.444rem;
    border-radius: .9rem;
    position: absolute;
    overflow: hidden;
  }

  .room_image {
    top: 10.705rem;
    left: -6.16rem;
  }

  .forest_image {
    top: 23.076rem;
    left: 21.4rem;
  }

  .road_image {
    top: 0rem;
    left: 12rem;
  }

  .bird_image {
    height: 11.509rem;
    width: 15.649rem;
    top: 70.33rem;
    left: -2.5rem;
    z-index: 5;
  }

  .representatives_image {
    top: 78.886rem;
    left: 15.1rem;
    z-index: 5;
  }

  .bear_image {
    width: 21.36rem;
    height: 17.121rem;
    position: absolute;
    top: 64.728rem;
    right: -2.61rem;
  }

  /* ----UTARIとは文章---- */
  .about_utari_text {
    position: relative;
    top: 39.3rem;
    left: 0;
    margin: 0 auto;
    width: 31.9rem;
  }

  .utari_introduction {
    font-size: 1.4rem;
    line-height: 2rem;
    top: 4.5rem;
  }


  /* --------お仕事内容セクション-------- */

  .job_description_section {
    padding-top: 5rem;
  }

  .utari_headlines {
    font-size: 2.5rem;
    line-height: 3.6rem;
  }

  /* ----スライドショー---- */
  .swiper {
    margin: 2.391rem auto 0;
  }

  .swiper-slide {
    width: 31.9rem;
    height: fit-content;
  }


  .job_image_box {
    width: fit-content;
    height: fit-content;
    margin: 0 auto;
    position: relative;
  }

  .job_image {
    width: 31.9rem;
    height: 18.15rem;
  }

  .job_category {
    width: 13.8rem;
    height: 3.1rem;
    font-size: 1.5rem;
    line-height: 2.1rem;
    padding-left: .7rem;
    position: absolute;
    left: -1.4rem;
    bottom: -1.25rem;
    font-weight: 400;
  }

  .job_category::after {
    content: "";
    background-color: var(--moss);
    width: 1.198rem;
    height: 100%;
    position: absolute;
    right: -1.198rem;
    top: 0;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
  }

  .job_description {
    width: fit-content;
    max-width: 31.9rem;
    height: fit-content;
    font-size: 1.4rem;
    line-height: 2rem;
    margin: 3rem auto 0;
  }

  /* ----スライダーのボタン---- */
  .swiper_button_wrapper {
    position: absolute;
    width: 2.178rem !important;
    height: 2.178rem !important;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 7.987rem;
    left: 1.4rem;
    z-index: 100;
  }

  .wrapper_for_position {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .next_button_wrapper {
    left: 33.922rem;
  }

  .swiper_button {
    width: 2.178rem !important;
    height: 2.178rem !important;
    border-radius: 50%;
    border: .1rem solid transparent;
    /* ボーダーは透明にしておく */
    background: linear-gradient(120deg, #E0D367, #7EC8B6) border-box;
    -webkit-mask:
      linear-gradient(#fff 0 0) padding-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    background-clip: border-box;
    top: 100%;
    line-height: 0;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
  }

  .swiper-button-next {
    background: linear-gradient(-120deg, #E0D367, #7EC8B6) border-box;
  }

  .swiper_button_bar {
    width: 1.139rem;
    height: .1rem;
    background: linear-gradient(to right, #E0D367, #7EC8B6) !important;
  }

  .next_button_bar {
    background: linear-gradient(to left, #E0D367, #7EC8B6) !important;
  }

  .swiper_button_bar::before {
    content: "";
    width: .5765rem;
    height: .1rem;
    background: linear-gradient(to right, #E0D367, #7EC8B6) !important;
    position: absolute;
    bottom: .2rem;
  }

  .prev_button_bar::before {
    transform: rotate(-45deg);
  }

  .next_button_bar::before {
    right: -.2rem;
    bottom: .2rem;
    transform: rotate(45deg);
    background: linear-gradient(to left, #E0D367, #7EC8B6) !important;
  }

  .swiper-button-next:after,
  .swiper-button-prev:after {
    content: "" !important;
    display: none !important;
    opacity: 0 !important;
  }

  /* ----IT研修---- */
  .about_workshop {
    width: 100%;
    height: 63rem;
    margin-top: 8rem;
    position: relative;
  }

  .about_workshop_text {
    position: relative;
    top: 0;
    left: 2.8rem;
    width: 100%;
  }

  .workshop_headline {
    font-size: 2rem;
    line-height: 2.9rem;
    font-weight: bold;
    color: var(--moss);
  }

  .front_links {
    width: 22.004rem;
    height: 3.873rem;
    font-size: 1.4rem;
    line-height: 2rem;
    padding-left: 1rem;
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 2rem;
    position: relative;
    transition-duration: .5s;
  }

  .front_links:hover {
    gap: 2rem;
  }

  .front_links::before {
    content: "";
    width: 1.2rem;
    height: .1rem;
    display: block;
    position: relative;
    left: 1rem;
    transition-duration: .3s;
  }

  .front_links:hover:before {
    width: 2.5rem;
  }

  .front_links::after {
    content: "";
    width: 1.5rem;
    height: 100%;
    position: absolute;
    right: -1.5rem;
    bottom: 0;
    clip-path: polygon(0 0, 0 100%, 100% 100%);
  }

  .link_to_about {
    background-color: var(--moss);
    padding: 0;
    color: white;
    margin-top: 2.5rem;
  }

  .link_to_about::before {
    background-color: white;
    position: relative;
  }

  .link_to_about::after {
    background-color: var(--moss);
  }

  .workshop_text {
    font-size: 1.4rem;
    line-height: 2rem;
    color: #333333;
    margin-top: 2rem;
  }

  .workshop_monitor_image {
    width: 15.3rem;
    height: 14.9rem;
    position: absolute;
    top: 42.9rem;
    left: 1.4rem;
    border-radius: 1rem;
    overflow: hidden;
  }

  .workshop_discussion_image {
    width: 26.8rem;
    height: 19.1rem;
    border-radius: 1rem;
    overflow: hidden;
    position: absolute;
    top: 21.8rem;
    right: 1.4rem;
  }


  /* --------お知らせ・ブログセクション-------- */

  .blog_section {
    width: 100%;
    height: 72rem;
    background-color: var(--moss);
    padding: 4.9rem 1.4rem 0;
    position: relative;
  }

  .blog_section_title {
    display: block;
    height: 3.6rem;
    gap: 0;
    margin-left: 0;
  }

  .blog_headline {
    color: white;
  }

  .link_to_blog {
    background-color: white;
    color: var(--moss);
    position: absolute;
    top: 62.1rem;
    padding-left: 3.5rem;
    transition-duration: .3s;
  }

  .link_to_blog:hover {
    padding-left: 4.8rem;
  }

  .link_to_blog::before {
    background-color: var(--moss);
    position: absolute;
    width: 1.2rem;
  }

  .link_to_blog::after {
    background-color: white;
  }

  /* ----ブログ記事一覧---- */
  .blog_articles_area {
    width: 34.7rem;
    margin: 2.6rem auto 0;
    display: grid;
    grid-template-columns: repeat(2, 16.5rem);
    column-gap: 1.7rem;
    row-gap: 1.7rem;
  }

  .blog_article {
    width: 16.5rem;
    color: white;
    font-weight: bold;
  }

  .blog_image {
    width: 16.5rem;
    height: 16.5rem;
    border-radius: 1rem;
    overflow: hidden;
  }

  .blog_title {
    font-size: 1.2rem;
    line-height: 1.7rem;
    margin-top: .8rem;
    width: 16.5rem;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;
  }

  .blog_fundamental_data {
    display: flex;
    gap: .9rem;
    font-size: 1.1rem;
    font-weight: bold;
    margin-top: .6rem;
  }
}