@charset "utf-8";

/****************************************
 * 共通
 ****************************************/
.p-top__heading-container{
  text-align: center;
}
.p-top__heading-en{
  font-size: 5.6rem;
  font-family: var(--font-family-en);
  font-weight: var(--font-weight-semibold);
  color: var(--color-orange);
  letter-spacing: 0.05em;
}
.p-top__heading-ja{
  font-size: 2rem;
  color: var(--color-darkbrown);
}

@media (width <= 768px){
  .p-top__heading-en{
    font-size: 4rem;
    line-height: 1.2;
  }
  .p-top__heading-ja{
    font-size: 1.8rem;
  }
}
/****************************************
 * MV
 ****************************************/
.p-top-mv{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr [heading] max-content [text] auto 1fr;
  justify-content: center;
  align-items: center;
  height: max(54rem, 100lvh + 4.3rem);
  padding-bottom: 4.3rem;
  position: relative;
  z-index: 0;
  color: var(--color-white);
}
.p-top-mv__heading-container{
  grid-row: heading;
  margin-bottom: 4.4rem;
  color: var(--color-white);
  text-align: center;
}
.p-top-mv__heading{
  font-size: 5.6rem;
  letter-spacing: 0.05em;
  font-family: var(--font-family-en);
}
.p-top-mv__sub-heading{
  width: max-content;
  margin: -0.6rem auto 0;
}

.p-top-mv__text{
  grid-row: text;
  font-size: 2rem;
  color: var(--color-white);
  line-height: 2;
  text-align: center;
}
.p-top-mv__message-link-container{
  grid-row: 4;
  position: absolute;
  right: var(--side-margin);
  bottom: 14.9rem;
}
.p-top-mv__message-link{
  --this-hover-text-color: var(--text-color);
  --this-hover-bg-color: var(--color-white);
  --this-hover-border-color: var(--this-hover-bg-color);
  width: 23.8rem;
  height: 6rem;
  font-size: 2rem;
  font-weight: var(--font-weight-medium);
}
.p-top-mv__message-link::after{
  margin-right: 1.8rem;
  position: relative;
  top: 0.1rem;
}

.p-top-mv__mv{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -5;
}
.p-top-mv__mv::before{
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  background-color: rgb(0 0 0 / 0.32);
}
.p-top-mv__mv video{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (width <= 768px){
  .p-top-mv{
    grid-template-rows: 1fr [heading] max-content [text] auto [link] 1fr 1fr;
  }
  .p-top-mv__heading-container{
    margin-bottom: 3.2rem;
  }
  .p-top-mv__heading{
    font-size: 4.8rem;
  }
  .p-top-mv__sub-heading{
    width: 12rem;
  }
  .p-top-mv__text{
    width: var(--main-inner);
    margin: 0 auto;
    font-size: min(4.4vw, 1.8rem);
    text-align: left;
  }
  .p-top-mv__message-link-container{
    grid-row: link;
    justify-self: center;
    position: relative;
    right: auto;
    bottom: auto;
  }
  .p-top-mv__message-link{
    width: min(63vw, 23.8rem);
    height: 5rem;
    font-size: 1.8rem;
  }
}

/****************************************
 * お知らせ（配置のみ）
 ****************************************/
.p-top-news{
  position: absolute;
  bottom: calc(4.3rem + 2rem);
  left: var(--side-margin);
  z-index: 5;
}

/****************************************
 * 募集職種
 ****************************************/
.p-top-type{
  --this-bg-color: #FFA953;
  display: grid;
  grid-template-columns: 34.4rem 1fr;
  grid-template-rows: max-content 1fr;
  grid-template-areas:
    "heading slider"
    "buttons slider";
  margin-top: -4.3rem;
  padding-top: 10rem;
  padding-left: var(--side-margin);
  padding-bottom: 10rem;
  position: relative;
  z-index: 0;
  background-color: var(--this-bg-color);
  background-image: radial-gradient(closest-side, #FFE16B, var(--this-bg-color));
  background-position: top 50% right 7.273vw;
  background-repeat: no-repeat;
  background-size: 92.727% auto;
  border-radius: var(--main-border-radius);
}
.p-top-type__heading-container{
  grid-area: heading;
  text-align: left;
}
.p-top__heading-en--type,
.p-top__heading-ja--type{
  color: var(--color-white);
}
.p-top-type__button-track{
  grid-area: buttons;
  margin-top: 4rem;
  overflow: visible;
}
.p-top-type__button-container{
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  position: sticky;
  top: calc(var(--header-height) + 4rem);
  left: 0;
  z-index: 5;
}
.p-top-type__button{
  cursor: pointer;
  padding: 0.5em 1em;
  border-radius: 2rem;
  color: var(--color-orange);
  background-color: var(--color-white);
  border: 0.2rem solid currentColor;
}
.p-top-type__button.is-current{
  color: var(--color-white);
  background-color: var(--color-orange);
  border-color: var(--color-orange);
}
.p-top-type__slider-wrap{
  --this-slide-outer-size: 57rem;
  --this-slide-inner-size: 50rem;
  grid-area: slider;
  width: 100%;
  min-width: 0;
  margin-top: -2.5rem;
  padding-left: 3.1rem;
  overflow: hidden;
}
.p-top-type__slider{
  width: 100%;
  min-width: 0;
  padding-left: 7.4rem;
  overflow: visible;
}
.p-top-type__slider-track{
  display: grid;
  grid-template-columns: var(--this-slide-outer-size);
  grid-template-rows: max-content 1fr;
  grid-auto-flow: column;
  min-width: 0;
  padding-right: var(--side-margin);
}
.is-single-row .p-top-type__slider-track{
  grid-template-rows: max-content;
}
.p-top-type__slider-item{
  max-width: var(--this-slide-outer-size);
  min-width: var(--this-slide-outer-size);
  height: 100%!important;
  padding: 2.5rem;
}
.p-top-type__slider-button--prev,
.p-top-type__slider-button--next{
  --swiper-navigation-top-offset: calc(50% - 1.5rem);
  --this-size: 8rem;
  width: var(--this-size);
  height: var(--this-size);
  color: var(--color-orange);
  background-color: var(--color-white);
  border: 0.3rem solid currentColor;
  border-radius: 50%;
  box-shadow: 0px 3px 9px rgb(0 0 0 / 0.16);
}
.p-top-type__slider-button--next{
  --swiper-navigation-sides-offset: var(--side-margin);
}
.p-top-type__slider-button--prev::before,
.p-top-type__slider-button--next::before{
  content: "";
  display: block;
  width: 1.4rem;
  height: 2.5rem;
  position: absolute;
  top: calc(50% - 1.3rem);
  right: 2.8rem;
  z-index: 0;
  background-color: currentColor;
  mask-image: url(mask-image/chevron.svg);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.p-top-type__slider-button--prev::before{
  right: auto;
  left: 2.8rem;
  rotate: 180deg;
}
.swiper-navigation-icon{
  display: none;
}


.p-top-type__item-inner{
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  width: max-content;
  height: 100%;
}
.p-top-type__image{
  margin-left: 2rem;
  width: min(100%, var(--this-slide-inner-size));
  aspect-ratio: 500 / 360;
  border-radius: var(--main-border-radius);
  overflow: hidden;
}
.p-top-type__image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.p-top-type__body{
  display: flex;
  flex-direction: column;
  width: var(--this-slide-inner-size);
  margin-top: -5.5rem;
  margin-right: 2rem;
  padding: 3.5rem 3.5rem 2.5rem;
  position: relative;
  z-index: 5;
  background-color: var(--color-white);
  border-radius: var(--main-border-radius);
}
.p-top-type__employment-type{
  padding: 0.8rem 1.5rem 0.9rem;
  position: absolute;
  bottom: calc(100% - 1.9rem);
  left: 2rem;
  z-index: 5;
  font-size: 1.8rem;
  color: var(--color-darkbrown);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-yellow);
  border-radius: 5rem;
}
.p-top-type__type-name{
  margin-bottom: 1.1rem;
  font-size: 3.2rem;
  font-weight: var(--font-weight-bold);
}
.p-top-type__summary{
  margin-bottom: auto;
  padding-left: 0.2rem;
  font-size: 1.8rem;
  line-height: 2;
}
.p-top-type__tag-list{
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.4rem;
  margin-top: 2rem;
  margin-left: -0.4rem;
  padding-left: 0;
}
.p-top-type__tag-item{
  padding: 0.2rem 1rem;
  font-size: 1.6rem;
  color: var(--color-orange);
  font-weight: var(--font-weight-medium);
  background-color: var(--color-lightorange);
  border-radius: 2rem;
}
.p-top-type__link-container{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin-top: 2.1rem;
}
.p-top-type__link-container:has(a:nth-of-type(2)){
  justify-content: space-between;
}

.p-top-type__detail-link{
  --this-hover-text-color: var(--color-white);
  width: 22.3rem;
  height: 5.4rem;
  color: var(--color-white);
  font-size: 2rem;
  background-image: var(--button-main-gradient);
  background-color: var(--color-red);
  border-width: 0;
}

@media (width <= 1280px){
  .p-top-type__slider-track{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    grid-auto-flow: column;
    padding-right: var(--side-margin);
  }
}
@media (width <= 1080px){
  .p-top-type{
    display: flex;
    flex-direction: column;
  }
  .p-top-type__button-track{
    margin-bottom: 4rem;
    position: relative;
  }
  .p-top-type__slider-wrap{
    padding-left: 0;
  }
  .p-top-type__slider{
    padding-left: 4rem;
  }
  .p-top-type .p-top-type__slider-button--prev{
    left: 0;
  }
}
@media (width <= 768px){
  .p-top-type{
    margin-top: -2.4rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
    padding-left: 0;
  }
  .p-top-type__heading-container{
    width: var(--main-inner);
    margin: 0 auto;
  }
  .p-top-type__button-track{
    width: var(--main-inner);
    margin: 2rem auto;
  }
  .p-top-type__button-container{
    position: relative;
    top: auto;
  }
  .p-top-type__button{
    padding: 0.2em 1em;
    /* font-size: 1.5rem; */
  }

  .p-top-type__slider{
    padding-left: 0;
  }
  .p-top-type__slider-wrap{
    --this-slide-outer-size: 32rem;
    --this-slide-inner-size: 28rem;
    margin-top: 0;
    padding: 0 var(--side-margin);
  }
  .p-top-type__slider-button--prev, .p-top-type__slider-button--next{
    --swiper-navigation-top-offset: calc(50% - 1.5rem);
    --this-size: 4.4rem;
    border-width: 0.2rem;
  }
  .p-top-type .p-top-type__slider-button--prev{
    left: -1.6rem;
  }
  .p-top-type .p-top-type__slider-button--next{
    right: -1.6rem;
  }
  .p-top-type__slider-button--prev::before, .p-top-type__slider-button--next::before{
    width: 1rem;
    height: 2rem;
    top: calc(50% - 1rem);
    right: 1.3rem;
  }
  .p-top-type__slider-button--prev::before{
    right: auto;
    left: 1.3rem;
  }

  .p-top-type__slider-item{
    padding: 1rem;
  }
  .p-top-type__employment-type{
    padding: 0.6rem 1.5rem 0.7rem;
    left: 1rem;
    font-size: 1.6rem;
    font-weight: var(--font-weight-semibold);
  }
  .p-top-type__body{
    margin-top: -2.5rem;
    padding: 3rem 2rem 2rem;
  }
  .p-top-type__type-name{
    margin-bottom: 0.6rem;
    font-size: 2rem;
  }
  .p-top-type__summary{
    font-size: 1.6rem;
  }

  .p-top-type__tag-item{
    font-size: 1.4rem;
  }
  .p-top-type__link-container{
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }
  .p-top-type__detail-link{
    width: min(100%, 22.3rem);
    height: 4rem;
    font-size: 1.8rem;
  }
}

/****************************************
 * 社員インタビュー
 ****************************************/
.p-top-interview{
  padding-top: 10rem;
  padding-bottom: 10rem;
}
.p-top-interview__heading-container{
  margin-bottom: 6rem;
}
.p-top-interview__inner{
  width: var(--main-inner);
  margin: 0 auto;
}
.p-top-interview__list{
  display: flex;
  flex-wrap: wrap;
  gap: 4.3rem;
  justify-content: center;
  align-items: stretch;
  padding-left: 0;
  list-style-type: none;
}
.p-top-interview__item{
  flex-basis: max(40rem, (100% - 4.3rem * 2) / 3);
  display: grid;
  grid-auto-columns: 1fr;
  grid-template-rows: auto 1fr;
}

.p-top-interview__image{
  aspect-ratio: 427 / 313;
  border-radius: var(--main-border-radius);
  overflow: hidden;

  background-color: #989898;
}
.p-top-interview__body{
  display: flex;
  flex-direction: column;
  padding: 4rem 3rem 0;
  position: relative;
}
.p-top-interview__type{
  display: inline-block;
  padding: 0.8rem 1.5rem 0.9rem;
  position: absolute;
  bottom: calc(100% - 1.9rem);
  left: 2.8rem;
  z-index: 5;
  font-size: 1.8rem;
  color: var(--color-darkbrown);
  font-weight: var(--font-weight-bold);
  background-color: var(--color-yellow);
  border-radius: 5rem;
}
.p-top-interview__overview{
  margin-bottom: auto;
  font-size: 3.2rem;
  font-weight: var(--font-weight-bold);
}

.p-top-interview__link{
  margin-top: 4rem;
  align-self: flex-end;
}

@media (width <= 1080px){
  .p-top-interview__overview{
    font-size: min(3vw, 3.2rem);
  }
}
@media (width <= 768px){
  .p-top-interview{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .p-top-interview__heading-container{
    margin-bottom: 4rem;
  }
  .p-top-interview__list{
    display: grid;
    gap: 4rem;
    grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  }
  .p-top-interview__item{
    flex-basis: auto;
  }
  .p-top-interview__type{
    left: 1.4rem;
    font-size: 1.6rem;
  }
  .p-top-interview__body{
    padding: 3rem 1.4rem 0;
  }
  .p-top-interview__overview{
    font-size: min(6vw, 2.2rem);
  }
  .p-top-interview__link{
    margin-top: 2rem;
  }
}

/****************************************
 * 仕事風景
 ****************************************/
.p-top-gallery{
  padding-top: 10rem;
  padding-bottom: 10rem;
  background-color: var(--color-lightorange);
  overflow: hidden;
}
.p-top-gallery__heading-container{
  margin-bottom: 5rem;
}
.p-top-gallery__slider{
  height: 36rem;
}
.p-top-gallery__slider-track{
  transition-timing-function: linear;
}
.p-top-gallery__slider-item{
  width: auto;
  height: 100%;
  border-radius: var(--main-border-radius);
  overflow: hidden;
}
.p-top-gallery__slider-item img{
  width: auto;
  height: 100%;
}
.p-top-gallery__link-container{
  width: max-content;
  margin: 6rem auto 0;
}
.p-top-gallery__link{
  --this-hover-text-color: var(--color-white);
  --this-hover-bg-color: var(--color-orange);
  --this-hover-border-color: var(--this-hover-bg-color);
  width: 22.3rem;
  height: 5.4rem;
  font-size: 2rem;
  color: var(--color-orange);
  background-color: var(--color-white);
}

@media (width <= 1080px){
  .p-top-gallery__slider{
    height: min(40vw, 36rem);
  }
}
@media (width <= 768px){
  .p-top-gallery{
    padding-top: 5rem;
    padding-bottom: 5rem;
  }
  .p-top-gallery__heading-container{
    margin-bottom: 4rem;
  }
  .p-top-gallery__slider{
    height: clamp(16rem, 50vw, 36rem);
  }
  .p-top-gallery__link-container{
    margin-top: 4rem;
  }
  .p-top-gallery__link{
    width: 18rem;
    height: 4.2rem;
    font-size: 1.8rem;
    font-weight: var(--font-weight-semibold);
  }
}