html {
  font-size: 20px;
  margin: 0!important;
  padding: 0!important;
  scrollbar-gutter: stable;
  scroll-behavior: smooth;
  @media (width >= 961px) {
     font-size: 10px;
  }
}
body {
  color: #333333;
  font-family: "Zen Kaku Gothic New", sans-serif;
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.8;
  margin: 0;
  padding: 0;
  min-width: 720px;
  max-width: 960px;
  @media (width >= 961px) {
    padding: 0;
    min-width: 960px;
    max-width: 100%;
  }
}
* {
  box-sizing: border-box; 
}

.sp {
  @media (width >= 961px) {
    display: none;
  }
}
.pc {
  display: none;
  @media (width >= 961px) {
    display: block;
  }
}

img {
  height: auto;
  object-fit: cover;
  margin: 0;
  padding: 0;
  vertical-align: bottom;
  width: auto;
}

a {
  transition: .5s;
  &:hover {
    opacity: .7;
  }
}

.disc {
  font-family: "Poppins", sans-serif;
  font-size: 1.4rem;
  font-style: normal;
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 .6rem;
  padding: 0 0 0 1.4rem;
  position: relative;
  @media (width >= 961px) {
    font-size: 1.6rem;
    margin: 0 0 1.6rem;
    padding: 0 0 0 2.3rem;
  }
  &::before {
    background: #02754B;
    border-radius: 50%;
    content: "";
    display: block;
    height: .8rem;
    left: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: .8rem;
    @media (width >= 961px) {
      height: .9rem;
      left: .4rem;
      width: .9rem;
    }
  }
}

.more-bt {
  display: inline-block;
  text-decoration: none;
  padding: 0 9.55rem 0 0;
  position: relative;
  width: auto;
  @media (width >= 961px) {
    padding: 0 13.4rem 0 0;
  }

  svg {
    height: 5.3rem;
    transition: .5s;
    vertical-align: bottom;
    width: 5.3rem;
    @media (width >= 961px) {
      height: 7.4rem;
      width: 7.4rem;
    }
  }

  p {
    border-bottom: .1rem solid #333;
    bottom: 1.85rem;
    color: #333;
    font-size: 1.4rem;
    font-weight: 700;
    left: 2.65rem;
    line-height: 1.2rem;
    margin: 0;
    padding: 0 0 .7rem 0;
    position: absolute;
    text-align: right;
    transition: .5s;
    width: 12.2rem;
    @media (width >= 961px) {
      bottom: 2.6rem;
      font-size: 2rem;
      left: 3.7rem;
      padding: 0 0 1rem 0;
      width: 17.1rem;
    }
  }

  &:hover {
    opacity: 1;

    svg {
      opacity: .7;
    }

    p {
      color: #02754B;
      width: 13.2rem;
      @media (width >= 961px) {
        width: 18.1rem;
      }
    }
  }
}

#page-hero {
  background: #333;
  position: relative;
  >img {
    height: auto;
    opacity: .7;
    width: 100%;
  }
  >div {
    display: inline-block;
    left: 2rem;
    position: absolute;
    top: calc(50% + 5.4rem);
    transform: translateY(-50%);
    width: auto;
    @media (width >= 961px) {
      top: 50%;
    }
    >p {
      color: #fff;;
      font-family: "Poppins", sans-serif;
      font-size: 2rem;
      font-weight: 600;
      line-height: 1;
      margin: 0 0 1.8rem;
      @media (width >= 961px) {
        font-size: 2.8rem;
        margin: 0 0 2.4rem;
      }
    }
    >h1 {
      color: #fff;
      font-size: 4.8rem;
      font-weight: 700;
      line-height: 1;
      margin: 0;
      @media (width >= 961px) {
        font-size: 5.6rem;
      }
    }
  }
}

.breadcrumbs {
  display: flex;
  gap: .4rem;
  list-style: none;
  margin: 0 auto;
  padding: 2rem 2rem 0;
  @media (width >= 961px) {
    gap: 1.1rem;
    padding: 3.2rem 2rem 0;
    width: 96rem;
  }
  >li {
    display: inline-block;
    font-size: 1.4rem;
    line-height: 1;
    width: auto;
    >a {
      color: #02754B;
    }
    &::after {
      background: url(../img/arrow-breadcrumbs.png) center center / .34rem .6rem no-repeat;
      content: "";
      display: inline-block;
      height: 100%;
      margin: 0 0 0 .4rem;
      width: .34rem;
      @media (width >= 961px) {
        margin: 0 0 0 1.1rem;
      }
    }
    &:last-of-type {
      &::after {
        display: none;
      }
    }
  }
}

.wallpaper {
  background:url(../img/bg-w.png) center center / 10rem 10rem;
  overflow: hidden;
}

.heading {
  >p {
    align-items: center;
    display: flex;
    font-family: "Poppins", sans-serif;
    font-size: 1.4rem;
    font-weight: 500;
    gap: 1rem;
    line-height: 1.2;
    margin: 0 0 .6rem;
    @media (width >= 961px) {
      font-size: 1.6rem;
      margin: 0 0 1.6rem;
    }
    &::before {
      background: #02754B;
      border-radius: 50%;
      content: "";
      display: block;
      height: .8rem;
      width: .8rem;
      @media (width >= 961px) {
        height: .9rem;
        width: .9rem;
      }
    }
  }
  >h2 {
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    @media (width >= 961px) {
      font-size: 4rem;
    }
  }
}