@charset "UTF-8";
/* CSS Document */
.wrap-fv {
  position: relative;
}
h1.heading-catch {
  font-size: 3.2rem;
  text-align: center;
}
.wrap-fv nav {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
	padding-top: 4rem;
}
.wrap-fv nav ul {
  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;
}
.wrap-fv nav ul li {
  width: calc(100% / 3);
  max-width: 440px;
  font-size: calc(2.4rem + ((1vw - (768 / 100 * 0.1rem)) * 100 * (30 - 24) / (1920 - 768)));
  color: #fff;
  height: 240px;
  padding: 20px;
  text-align: center;
}
.wrap-fv nav ul li a {
  border-radius: 1em 0;
  background-color: rgb(0 0 0 / 30%);
  border: 1px solid #fff;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.wrap-fv nav ul li:has(a:hover) {
  background-color: rgb(0 0 0 / 50%);
}
.wrap-fv nav ul li a:hover {
  background-color: rgb(0 0 0 / 0%);
  border-radius: 0;
}
.wrap-fv-img {
	border-radius: 48px 0;
  width: calc(100% - 4.5vw);
  height: 80vh;
  text-align: center;
  margin: auto;
	position: relative;
	overflow: hidden;
	z-index: -1;
}
.wrap-fv-img::before {
	content: '';
	position: absolute;
	display: block;
	width: 100%;
	height: 100%;
	background-image: conic-gradient(rgba(0,0,0,.35) 0deg 90deg, rgba(0,0,0,0) 90deg 180deg, rgba(0,0,0,.35) 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;
}
.wrap-fv nav ul li a p {
  font-weight: bold;
  line-height: 1.3;
}
.product_nav img {
  width: 65px;
  margin: .8em auto 0;
}
.product_cell img {
  width: 58px;
  margin: .8em auto 0;
}
.product_base img {
  width: 59px;
  margin: .8em auto 0;
}
@media screen and (min-width: 1920px) {
  .wrap-fv nav ul 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 (max-width: 959px) {
  h1.heading-catch {
    font-size: 2.4rem;
  }
  .wrap-fv {
    margin: 1em 0 0;
  }
  .wrap-fv nav ul {
    padding: 0 1em;
  }
  .wrap-fv nav ul li {
    font-size: calc(1.4rem + ((1vw - (421 / 100 * 0.1rem)) * 100 * (24 - 14) / (959 - 421)));
    height: 180px;
    padding: .5em;
  }
  .product_nav img {
    width: 34px;
  }
  .product_cell img {
    width: 28px;
  }
  .product_base img {
    width: 32px;
  }
}
@media screen and (max-width: 767px) {
  .wrap-fv-img {
    border-radius: 2em 0;
  }
}
@media screen and (max-width: 420px) {
  .wrap-fv nav ul {
    padding: 0;
  }
  .wrap-fv nav ul li {
    font-size: 1.4rem;
    height: 120px;
    padding: .4em;
  }
}
/* コンテンツ
-------------------------------------------------*/
/*　アニメーション　*/
/* ============================================ */
/* 表示されているスライドのテキスト */
/*
.wrap-anime  {
  opacity: 0;
}
*/
/*.wrap-fadein-under,*/
/*
.active.wrap-fadein-under {
  animation-delay: .3s;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUnder;
  opacity: 1;
}
*/
/*.wrap-fadein-under,*/
/*
.active.wrap-fadein-under {
  animation-delay: .3s;
  animation-duration: 1s;
  animation-fill-mode: both;
  animation-name: fadeInUnder;
  opacity: 1;
}
*/
/* アニメーション */
/*
@keyframes fadeInUnder {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
*/
/*print CSS
-------------------------------------------------*/
@media print {

}