@charset "utf-8";

.p-top-fv {
  width: 100%;
  aspect-ratio: 1366/768;
  position: relative;

  @media (width < 768px) {
    aspect-ratio: 1;
  }
}

.p-top-fv__slides.swiper {
  width: 100%;
  height: 100%;
  position: relative;

  &::before {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: linear-gradient(180deg, hsla(24, 97%, 81%, 0.75) 0%, hsla(38, 100%, 91%, 0.75) 26%, hsla(37, 91%, 98%, 0.75) 55%, hsla(170, 47%, 96%, 0.75) 78%, hsla(178, 74%, 83%, 0.75) 100%);
    backdrop-filter: blur(10px);
    mask-image: radial-gradient(circle 27vw at 50% 50%, transparent 99.8%, black 100%);

    @media (width < 768px) {
      mask-image: radial-gradient(circle 44vw at 50% 50%, transparent 99.8%, black 100%);
    }
  }

  &::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("https://mountfield.co.jp/system_panel/uploads/images/top-bg.png") no-repeat center center / cover;
    z-index: 3;
  }

  .swiper-wrapper {
  }

  .swiper-slide {
    object-fit: cover;
  }

  .swiper-slide.is-zooming {
    animation: fv-kenburns 5s linear forwards;
  }

  .swiper-pagination {
    height: 100%;
    padding-right: 38px;
    padding-bottom: 35px;
    display: flex;
    flex-direction: column;
    align-items: end;
    justify-content: center;
    gap: 18px;

    @media (width < 768px) {
      padding-right: 10px;
    }
  }

  .swiper-pagination-bullet {
    background: #fff;
    width: 6px;
    height: 6px;
    opacity: 1;
  }

  .swiper-pagination-bullet-active {
    background: var(--color-green);
  }
}

@keyframes fv-kenburns {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.1);
  }
}

.p-top-fv__title {
  position: absolute;
  bottom: 17%;
  left: 16%;
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: clamp(4px, calc(10vw / 13.66), 10px);

  @media (width < 1120px) {
    bottom: 5%;
  }

  @media (width < 768px) {
    left: 10%;
  }

  h1 {
    width: fit-content;
    background: linear-gradient(90deg, #16928d 0%, #81d2c5 32%, #f4af96 68%, #ffb437 100%);
    border-radius: 5px;
    padding: 6px 16px;
    font-weight: 500;
    font-size: clamp(20px, calc(32vw / 13.66), 32px);
    color: #fff;
    line-height: 1.344;

    @media (width < 768px) {
      font-size: 16px;
    }
  }

  h1:nth-of-type(2) {
    margin-left: 34px;
  }

  h1:nth-of-type(3) {
    margin-left: 65px;
  }
}

.p-top-fv__scroll {
  position: absolute;
  bottom: -11px;
  left: 26px;
  z-index: 4;

  @media (width < 768px) {
    left: 10px;
  }

  p {
    writing-mode: vertical-rl;
    white-space: nowrap;
    color: var(--color-green);
    font-size: 14px;
    font-family: var(--font-elms);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
  }

  p::before {
    content: "";
    position: absolute;
    width: 1px;
    height: 25px;
    background: #81d2c5;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
  }

  p::after {
    content: "";
    width: 1px;
    height: 95px;
    background: var(--color-green);

    @media (width < 768px) {
      height: 42px;
    }
  }
}

.gjs-dashed *[data-highlightable] {
  .p-top-fv__slides::before,
  .p-top-fv__slides::after {
    display: none;
  }

  .p-top-fv__slides {
    .swiper-wrapper {
      display: flex;
      flex-wrap: wrap;
    }

    .swiper-slide {
      width: 30%;
      object-fit: contain;
    }

    .swiper-pagination {
      display: none;
    }
  }
}

.p-top-value {
  padding: 130px 0 122px;

  @media (width < 768px) {
    padding: 80px 0;
  }

  .l-inner {
    max-width: 1080px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;

    @media (width < 768px) {
      flex-direction: column;
    }
  }
}

.p-top-value__left {
  flex: 1 1 auto;

  @media (width < 768px) {
    width: 100%;
    max-width: 334px;
  }
}

.p-top-value__heading-ja {
  opacity: 0.7;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.333;
}

.p-top-value__heading-en {
  margin-top: 8px;
  position: relative;
  height: 262px;
  max-width: 455px;

  @media (width < 768px) {
    height: 180px;
  }

  h2 {
    font-family: var(--font-elms);
    color: var(--color-l-green);
    font-size: 120px;
    font-weight: 500;
    opacity: 0.7;
    line-height: 1;

    @media (width < 768px) {
      font-size: 80px;
    }

    span {
      display: block;
      margin-left: 50px;
      margin-top: -0.4em;
    }
  }
}

.p-top-value__heading-en::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 70%;
  height: 252px;
  background: url("https://mountfield.co.jp/system_panel/uploads/images/top-value-bg.png") no-repeat right bottom / contain;
}

.p-top-value__right {
  width: 50%;

  @media (width < 768px) {
    width: 100%;
  }
}

.p-top-value__main-text {
  font-size: 32px;
  line-height: 1.594;

  @media (width < 768px) {
    font-size: 26px;
  }
}

.p-top-value__text {
  margin-top: 50px;
}

.p-top-service {
  background: #fdf3e3;
  padding: 80px 0 100px;
  border-radius: 40px;
}

.p-top-service__head {
  display: flex;
  align-items: start;
  gap: 27px;
}

.p-top-service__head::after {
  content: "";
  margin-top: 2.7em;
  background: var(--color-l-green);
  flex: 1 1 auto;
  height: 1px;

  @media (width < 768px) {
    margin-top: 30px;
  }
}

.p-top-service__heading {
}

.p-top-service__lists {
  margin: 70px auto 0;
  max-width: 1090px;
  display: flex;
  flex-direction: column;
  gap: 80px;
}

.p-top-service-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;

  @media (width < 768px) {
    flex-direction: column;
  }
}

.p-top-service-list__images {
  width: 46%;
  display: flex;
  align-items: start;
  gap: 4px;

  @media (width < 768px) {
    width: 100%;
  }
}

.p-top-service-list__num {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  writing-mode: vertical-rl;
  font-family: var(--font-elms);
  color: var(--color-l-green);
  line-height: 1.2;
}

.p-top-service-list__num::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-l-green);
}

.p-top-service-list__img {
  width: 80%;
  flex: 1 1 auto;
  aspect-ratio: 48/40;
  object-fit: cover;
}

.p-top-service-list__body {
  width: 46.5%;
  margin-top: 46px;
  padding-bottom: 44px;
  border-bottom: 1px dotted var(--color-l-green);

  @media (width < 768px) {
    width: 100%;
    margin-top: 0;
  }
}

.p-top-service-list__en {
  font-family: var(--font-elms);
  color: var(--color-l-green);
  opacity: 0.7;
  font-size: 30px;
  line-height: calc(4 / 3);
}

.p-top-service-list__heading {
  color: var(--color-green);
  font-size: 32px;
  line-height: calc(51 / 32);
  font-weight: 500;
}

.p-top-service-list__text {
  margin-top: 30px;
  margin-bottom: 34px;
  max-width: 480px;

  @media (width < 768px) {
    max-width: 100%;
  }
}

.p-top-search {
  margin-top: 160px;
  background: #fff;
  border-radius: 20px;
  padding: 60px 20px 40px;
  text-align: center;
  position: relative;

  @media (width < 768px) {
    margin-top: 100px;
  }
}

.p-top-search__heading {
  text-align: center;
  position: absolute;
  top: -42px;
  left: 50%;
  transform: translateX(-50%);

  @media (width < 768px) {
    top: -30px;
  }
}

.p-top-search__boxes {
  margin-top: 64px;
  display: flex;
  justify-content: center;
  gap: 20px;

  @media (width < 768px) {
    margin-top: 30px;
    flex-direction: column;
    align-items: center;
  }
}

.p-top-search-box {
  width: 50%;
  max-width: 540px;
  min-height: 245px;
  background: #e6f8f4;
  overflow: hidden;
  border-radius: 10px;
  text-align: left;

  @media (width < 768px) {
    width: 100%;
  }
}

.p-top-search-box__head {
  width: 100%;
  background: var(--color-green);
  color: #fff;
  font-size: 18px;
  line-height: 2.2;
  text-align: center;
}

.p-top-search-box__text {
  @media (width < 1120px) {
    font-size: 14px;
  }
}

.p-top-search-box__freeword {
  margin: 0 auto;
  padding: 46px 14px 50px;
  max-width: 490px;

  .search-title {
    display: none;
  }

  .horizontal-form {
    margin-top: 10px;
    width: 100%;
    height: 65px;
    background: #ffffff;
    box-shadow: 0px 3px 10px #00000029;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;

    input {
      width: 86%;
      padding: 0 1em;
      border: none;
      border-radius: 10px;
    }

    input:focus {
      outline: none;
    }

    .search-submit {
      width: 14%;
      min-width: 65px;
      height: 100%;
      background: var(--color-green);
      display: inline-flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 4px;
      color: #fff;
      font-weight: 500;
      font-size: 10px;
      flex-shrink: 0;
      border-radius: 0px 10px 10px 0;
    }

    .search-submit::before {
      content: "";
      width: 20px;
      height: 20px;
      background: url("https://mountfield.co.jp/system_panel/uploads/images/icon-search.svg") no-repeat center center / contain;
    }
  }
}

.p-top-search-box__areas {
  margin: 0 auto;
  padding: 40px 14px;
  max-width: 490px;
  min-height: calc(100% - 37px);
  background: url("https://mountfield.co.jp/system_panel/uploads/images/top-search-bg.png") no-repeat center center / auto 80%;

  @media (width < 768px) {
    min-height: calc(242px - 37px);
  }

  .search-title-wrapper {
    display: none;
  }

  .webgene-blog {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;

    @media (width < 768px) {
      gap: 14px;
    }

    a {
      width: 100%;
      min-height: 52px;
      padding: 0 0.5em;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      border: 1px solid var(--color-green);
      border-radius: 5px;
      background: #fff;
      font-weight: 500;
      line-height: normal;
    }

    a:hover {
      opacity: 0.7;
    }

    a::after {
      content: "";
      width: 16px;
      height: 16px;
      flex-shrink: 0;
      background: url("https://mountfield.co.jp/system_panel/uploads/images/area-arrow.svg") no-repeat center center / contain;
    }
  }
}

.p-top-search .c-arrow-btn {
  margin-top: 40px;
  min-width: 174px;
}

.p-top-company {
  margin-top: 90px;
  overflow: hidden;

  @media (width < 768px) {
    margin-top: 60px;
  }

  .l-inner {
    max-width: 1285px;
    display: flex;
    align-items: start;
    justify-content: end;
    gap: clamp(20px, calc(80vw / 13.66), 80px);

    @media (width < 768px) {
      flex-direction: column;
      gap: 40px;
    }
  }
}

.p-top-company__head {
  margin-top: 40px;
  max-width: 680px;
  flex: 1 1 auto;

  @media (width < 768px) {
    max-width: none;
  }
}

.p-top-company__main-img {
  display: block;
  margin-top: -58px;
  width: 100%;
  aspect-ratio: 68/46;
  border-radius: 10px;
  position: relative;
  z-index: 1;

  @media (width < 768px) {
    margin-top: -20px;
    width: 95%;
    max-width: 680px;
  }
  
    img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
  }
}

.p-top-company__main-img::after {
  content: "";
  position: absolute;
  right: -75px;
  bottom: -80px;
  width: 71%;
  aspect-ratio: 480/374;
  background: url("https://mountfield.co.jp/system_panel/uploads/images/top-company-bg.png") no-repeat center center / contain;

  @media (width < 768px) {
    right: -40px;
    bottom: -20px;
  }
}

.gjs-dashed *[data-highlightable] .p-top-company__main-img::after {
  z-index: -1;
}

.p-top-company__heading {
  margin-left: 30px;
  position: relative;
  z-index: 2;

  @media (width < 1120px) {
    margin-left: 0;
  }

  .c-heading__en {
    font-size: clamp(80px, calc(120vw / 13.66), 120px);

    @media (width < 768px) {
      font-size: 70px;
    }
  }

  .c-heading__ja {
    font-size: 18px;
    margin-left: 10px;
    margin-top: -14px;
  }
}

.p-top-company__body {
  width: 37.2%;
  flex-shrink: 0;

  @media (width < 768px) {
    width: 100%;
  }

  img {
    display: block;
    margin-left: auto;
    width: 270px;
    aspect-ratio: 27/16;
    border-radius: 10px;
    object-fit: cover;
  }
}

.p-top-company__main-text {
  margin-top: 60px;
  font-size: 32px;
  line-height: calc(51 / 32);

  @media (width < 1120px) {
    font-size: 26px;
  }
}

.p-top-company__text {
  margin: 25px 0 35px;
  max-width: 440px;
  
  @media (width < 768px) {
    max-width: 100%;
  }
}

.p-top-news {
  padding: 180px 0 120px;
  overflow: hidden;

  @media (width < 768px) {
    padding: 100px 0 80px;
  }

  .l-inner {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 20px;

    @media (width < 768px) {
      flex-direction: column;
      gap: 60px;
    }
  }
}

.p-top-news__head {
  margin-top: 22px;
  width: 20%;
  min-width: 210px;

  @media (width < 768px) {
    margin-top: 0;
    width: 100%;
  }

  .c-arrow-btn {
    min-width: 202px;
  }
}

.p-top-news__heading {
  margin-bottom: 51px;
}

.p-top-news__lists {
  width: 75%;

  @media (width < 768px) {
    width: 100%;
  }

  section {
    display: flex;
    flex-direction: column;
  }
}