@charset "UTF-8";
/* CSS Document */
.top-index main {
  overflow: hidden;
}
.top_wrap {
  position: relative;
}
.wrap-fv-img {
  width: 100%;
  height: 80vh;
  min-height: 60rem;
  margin: auto;
  position: absolute;
	overflow: hidden;
	z-index: 0;
}
.wrap-fv-img::before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-image: conic-gradient(rgba(0,0,0,.20) 0deg 90deg, rgba(0,0,0,0) 90deg 180deg, rgba(0,0,0,.20) 180deg 270deg, rgba(0,0,0,0) 270deg 360deg);
  background-size: 4px 4px;
	z-index: 1;
}
.wrap-fv-img img {
  object-fit: cover;
  height: 100%;
	opacity: .9;
}
h1.heading-catch {
  font-size: 3.2rem;
  text-align: center;
}
.top-index nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}
.nav-top {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, rgba(0, 150, 106, 0.85) 0%, rgba(0, 120, 170, 0.85) 100%);
	padding: 0 6vw;
  margin: auto 0 0;
}
.nav-top li {
  width: calc(100% / 2);
  max-width: 440px;
  font-size: calc(2.4rem + ((1vw - (960 / 100 * 0.1rem)) * 100 * (30 - 24) / (1920 - 960)));
  font-weight: bold;
  color: #fff;
  height: 240px;
  padding: 20px;
  text-align: center;
}
.nav-top li a {
  border-radius: 1em 0;
  background-color: rgb(0 0 0 / 40%);
  border: 1px solid #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.nav-top li:has(a:hover) {
  background-color: rgb(0 0 0 / 60%);
  transition: 1s;
}
.nav-top li a:hover {
  background-color: rgb(0 0 0 / 0%);
  border-radius: 0;
}
.nav-top img {
  margin: .8em auto 0;
}
.product_nav img {
  width: 65px;
}
.product_base img {
  width: 59px;
}
.nav-sub {
  display: flex;
  width: 100%;
  gap: 1rem 1vw;
  padding: 0 4vw;
}
.nav-sub li {
  width: calc(100% / 7);
  font-size: calc(1.4rem + ((1vw - (960 / 100 * 0.1rem)) * 100 * (18 - 14) / (1920 - 960)));
  color: #1b7045;
  font-weight: bold;
  text-align: center;
}
.nav-sub li a {
  background-color: rgb(255 255 255 / 85%);
  border: 1px solid #1b7045;
  width: 100%;
  height: 100%;
  min-height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: .75em .25em;
  padding: 1em .5em;
}
.nav-sub li a:hover {
  color: #fff;
  background-color: #1b7045;
  border-radius: 0;
}

@media screen and (min-width: 1920px) {
  .nav-top li {
    font-size: 3rem;
  }
}
@media screen and (min-width: 1580px) {

}
@media print, screen and (min-width: 768px) {}
@media (min-width: 960px) and (max-width: 1920px) {
  h1.heading-catch {
    font-size: calc(2.4rem + ((1vw - (960 / 100 * 0.1rem)) * 100 * (32 - 24) / (1920 - 960)));
  }
}
@media screen and (min-width: 960px) {
  .top_wrap {
    margin: 0 2vw;
  }
  .wrap-fv-img {
    border-radius: 48px 0;
  }
  .top-index nav {
    width: calc(100% + 4vw);
    position: relative;
    padding: 8rem 0 4rem 0;
    height: 80vh;
    min-height: 60rem;
    margin-left: -2vw;
    flex-direction: column;
  }
  .nav-sub {
    max-width: 120rem;
    margin: 5rem 0 auto;
  }
  .nav-sub li {
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 959px) {
  h1.heading-catch {
    font-size: 2.4rem;
  }
  .wrap-fv-img {
    height: 50vh;
    min-height: 200px;
    margin: 0;
    position: relative;
  }
  .nav-top {
    padding: 2em 1em 1.5em;
  }
  .nav-top li {
    font-size: calc(1.8rem + ((1vw - (421 / 100 * 0.1rem)) * 100 * (24 - 18) / (959 - 421)));
    height: 180px;
    padding: .5em;
  }
  .nav-top img {
    margin: .8em auto 0;
  }
  .product_nav img {
    width: 34px;
  }
  .product_base img {
    width: 32px;
  }
  .product_cell p {
    font-size: .9em;
    line-height: 1.4;
  }
  .nav-sub {
    flex-wrap: wrap;
    background: linear-gradient(90deg, rgba(0, 150, 106, 0.85) 0%, rgba(0, 120, 170, 0.85) 100%);
    padding: 0 1em 2em;
    gap: 1rem;
  }
  .nav-sub li {
    width: calc((100% - 3rem) / 4);
    font-size: 1.4rem;
  }
}
@media screen and (max-width: 767px) {
  .nav-top {
    gap: 1em;
  }
  .nav-top li {
    font-size: 1.8rem;
    max-width: 100%;
    height: 100px;
    padding: 0;
  }
  .nav-top a {
    padding: .5em;
  }
  .nav-top img {
    margin: .3em auto 0;
  }
  .nav-sub li a {
    min-height: 65px;
    padding: .75em .25em;
  }
}

/*print CSS
-------------------------------------------------*/
@media print {

}