@charset "UTF-8";
main {
  padding-top: 11rem;
}
.c-contents {
  padding: 0 6rem;
  margin: 0;
  height: 100%;
}
.c-inner {
  max-width: 118rem;
  margin: 0 auto;
  height: 100%;
}
.c-inner.footer-contact {
  max-width: 138rem;
  padding: 0;
}
/* ----------------------------------------
.mv
---------------------------------------- */
.mv {
}
.mv__heading {
}
.mv__heading img {
  width: 100%;
  height: auto;
}
/* ----------------------------------------
.lineup-area
---------------------------------------- */
.lineup-area {
  background-color: #fff;
  padding: 8rem 0 7rem;
}
.lineup-title {
  font-size: 3.2rem;
  color: #5cb531;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 5rem;
}
.lineup-text {
  font-size: 1.6rem;
  line-height: 2;
}
.lineup-text span {
  font-weight: bold;
}
/* ----------------------------------------
.domestic-area
---------------------------------------- */
.domestic-area {
  background-color: #f2ecde;
  padding: 8rem 0 10rem;
}
.domestic-title {
  background-color: #0096e1;
  padding: 1.35rem 2rem;
  border-radius: 0.4rem;
  color: #fff;
  font-weight: bold;
  font-size: 3.2rem;
  line-height: 1.3;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin: 0 0 6rem;
}
.domestic-slider {
  display: flex;
}
.domestic-slider li {
  width: calc(100% / 3);
  margin: 0 2rem 0;
}
.domestic-slider li:last-child {
  margin: 0;
}
.domestic-box {
  background-color: #fff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 0 3rem;
}
.domestic-slider figure {
  margin: 0 0 3rem;
}
.domestic-slider figure img.d-img01 {
  max-width: 13.2rem;
  width: 8.5vw;
  height: auto;
}
.domestic-slider figure img.d-img02 {
  max-width: 13.2rem;
  width: 8.5vw;
  height: auto;
}
.domestic-slider figure img.d-img03 {
  max-width: 12.8rem;
  width: 8.2vw;
  height: auto;
}
.domestic-subtitle {
  font-weight: bold;
  font-size: 2.4rem;
  line-height: 1.3;
  text-align: center;
  color: #0a52a8;
}
@media screen and (max-width: 1250px) {
  .domestic-subtitle {
    font-size: 2rem;
  }
}
.domestic-text {
  font-size: 1.6rem;
  line-height: 2;
}
.domestic-text span {
  font-weight: bold;
  background-color: #ffff00;
}
/* ----------------------------------------
.pagination
---------------------------------------- */
.domestic-slider .pagination,
.whole-slider .pagination {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 3rem 0 0;
}
.domestic-slider .pagination li,
.whole-slider .pagination li {
  width: auto;
  margin: 0;
}
.domestic-slider .pagination li.slick-active button::before,
.whole-slider .pagination li.slick-active button::before {
  background-color: #0068b7;
}
.domestic-slider .pagination li button,
.whole-slider .pagination li button {
  position: relative;
  width: 1rem;
  height: 1rem;
  color: transparent;
}
.domestic-slider .pagination li button::before,
.whole-slider .pagination li button::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  background-color: #fff;
}
/* ----------------------------------------
.slick-arrow
---------------------------------------- */
.domestic-slider .slick-arrow,
.whole-slider .slick-arrow {
  position: absolute;
  top: 50%;
  margin: -5rem 0 0;
  z-index: 2;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background-color: #0068b7;
  text-indent: 100%;
  overflow: hidden;
  transition: opacity 0.12s;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
}
.domestic-slider .slick-arrow:hover,
.whole-slider .slick-arrow:hover {
  opacity: 0.8;
  box-shadow: none;
}
/* ----------------------------------------
.slick-prev
.slick-next
---------------------------------------- */
.domestic-slider .slick-prev::before,
.domestic-slider .slick-next::before,
.whole-slider .slick-prev::before,
.whole-slider .slick-next::before {
  content: "";
  position: absolute;
  width: 1.4rem;
  height: 1.4rem;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.domestic-slider .slick-prev,
.whole-slider .slick-prev {
  left: -1%;
}
.domestic-slider .slick-next,
.whole-slider .slick-next {
  right: -1%;
}
.domestic-slider .slick-prev::before,
.whole-slider .slick-prev::before {
  top: 2.4rem;
  right: 1.6rem;
  transform: translateY(-45%) rotate(-135deg);
}
.domestic-slider .slick-next::before,
.whole-slider .slick-next::before {
  top: 1.8rem;
  left: 1.6rem;
  transform: rotate(45deg);
}
/* ----------------------------------------
.optimal-area
---------------------------------------- */
.optimal-area {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 35rem;
}
.optimal-area::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("/products/stockbreeding/images3/common/bg-img.jpg");
  z-index: -1;
}
.optimal-title {
  font-weight: bold;
  font-size: 3.2rem;
  line-height: 1.5;
  text-align: center;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
/* ----------------------------------------
.various-area
---------------------------------------- */
.various-area {
  padding: 6rem 0 0;
  background-color: #fbf8f1;
  position: relative;
  z-index: 0;
}
.various-map {
  position: relative;
  z-index: 0;
  margin: 0 0 5.5rem;
}
.various-map picture img {
  border-radius: 0.4rem;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
}
.various-box {
}
.various-lot {
  position: absolute;
}
/*************************************** ボタン配置 */
.various-lot.button-01 {
  top: 51%;
  left: 2%;
}
.various-lot.button-02 {
  top: 34%;
  left: 19%;
}
.various-lot.button-03 {
  bottom: 5%;
  left: 28.5%;
}
.various-lot.button-04 {
  bottom: 18%;
  left: 31%;
}
.various-lot.button-05 {
  top: 44%;
  left: 39%;
}
.various-lot.button-06 {
  bottom: 25%;
  right: 30%;
}
.various-lot.button-07 {
  top: 13%;
  right: 27.5%;
}
.various-lot.button-08 {
  top: 38%;
  right: 21%;
}
.various-lot.button-09 {
  top: 17%;
  right: 7%;
}
.various-lot.button-10 {
  bottom: 12%;
  right: 7%;
}
.various-lot a {
  width: 16rem;
  height: 4.6rem;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.3rem;
  font-weight: bold;
  line-height: 1.3;
  border-radius: 10rem;
  background-color: #fff;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
  transition: all 0.12s ease-out;
  position: relative;
  z-index: 0;
}
.various-lot a::before {
  content: "";
  position: absolute;
  right: 1.5rem;
  width: 0.6rem;
  height: 0.6rem;
  transform: rotate(45deg);
  transition: all 0.12s ease-out;
}
/*************************************** 移送ポンプ */
.various-lot a.transfer {
  color: #5cb531;
  border: 2px solid #5cb531;
}
.various-lot a.transfer::before {
  border-top: 1px solid #5cb531;
  border-right: 1px solid #5cb531;
}
.various-lot a.transfer.hover {
  background-color: #5cb531;
  color: #fff;
  box-shadow: none;
}
.various-lot a.transfer.hover::before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
/*************************************** 汚水処理関連機器 */
.various-lot a.wastewater {
  color: #009f3e;
  border: 2px solid #009f3e;
}
.various-lot a.wastewater::before {
  border-top: 1px solid #009f3e;
  border-right: 1px solid #009f3e;
}
.various-lot a.wastewater.hover {
  background-color: #009f3e;
  color: #fff;
  box-shadow: none;
}
.various-lot a.wastewater.hover::before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
/*************************************** 汚泥脱水機 */
.various-lot a.dewatering {
  color: #008d43;
  border: 2px solid #008d43;
}
.various-lot a.dewatering::before {
  border-top: 1px solid #008d43;
  border-right: 1px solid #008d43;
}
.various-lot a.dewatering.hover {
  background-color: #008d43;
  color: #fff;
  box-shadow: none;
}
.various-lot a.dewatering.hover::before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
/*************************************** 高圧洗浄機 */
.various-lot a.washers {
  color: #00afec;
  border: 2px solid #00afec;
}
.various-lot a.washers::before {
  border-top: 1px solid #00afec;
  border-right: 1px solid #00afec;
}
.various-lot a.washers.hover {
  background-color: #00afec;
  color: #fff;
  box-shadow: none;
}
.various-lot a.washers.hover::before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
/*************************************** 取水・加圧移送 */
.various-lot a.boosting {
  color: #0091db;
  border: 2px solid #0091db;
}
.various-lot a.boosting::before {
  border-top: 1px solid #0091db;
  border-right: 1px solid #0091db;
}
.various-lot a.boosting.hover {
  background-color: #0091db;
  color: #fff;
  box-shadow: none;
}
.various-lot a.boosting.hover::before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
/*************************************** その他関連機器 */
.various-lot a.others {
  color: #0054a7;
  border: 2px solid #0054a7;
}
.various-lot a.others::before {
  border-top: 1px solid #0054a7;
  border-right: 1px solid #0054a7;
}
.various-lot a.others.hover {
  background-color: #0054a7;
  color: #fff;
  box-shadow: none;
}
.various-lot a.others.hover::before {
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
}
/* ----------------------------------------
#tCategory
---------------------------------------- */
.tCategory_navi {
  display: flex;
}
.tCategory_navi li {
  width: calc(100% / 6);
  min-width: 8rem;
  margin: 0 0.2rem 0 0;
  box-shadow: 0px -7px 8px 0px rgba(0, 0, 0, 0.2);
}
.tCategory_navi li:first-child {
  border-radius: 0.4rem 0 0 0;
  overflow: hidden;
}
.tCategory_navi li:last-child {
  margin: 0;
  border-radius: 0 0.4rem 0 0;
  overflow: hidden;
}
.tCategory_navi li a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.3;
  text-align: center;
  color: #fff;
  height: 8rem;
  transition: all 0.12s ease-out;
}
.tCategory_navi li a.transfer {
  background-color: #5cb531;
}
.tCategory_navi li a.transfer.hover,
.tCategory_navi li a.transfer.active {
  color: #5cb531;
}
.tCategory_navi li a.wastewater {
  background-color: #009f3e;
}
.tCategory_navi li a.wastewater.hover,
.tCategory_navi li a.wastewater.active {
  color: #009f3e;
}
.tCategory_navi li a.dewatering {
  background-color: #008d43;
}
.tCategory_navi li a.dewatering.hover,
.tCategory_navi li a.dewatering.active {
  color: #008d43;
}
.tCategory_navi li a.washers {
  background-color: #00afec;
}
.tCategory_navi li a.washers.hover,
.tCategory_navi li a.washers.active {
  color: #00afec;
}
.tCategory_navi li a.boosting {
  background-color: #0091db;
}
.tCategory_navi li a.boosting.hover,
.tCategory_navi li a.boosting.active {
  color: #0091db;
}
.tCategory_navi li a.others {
  background-color: #0054a7;
}
.tCategory_navi li a.others.hover,
.tCategory_navi li a.others.active {
  color: #0054a7;
}
.tCategory_navi li a.hover,
.tCategory_navi li a.active {
  background-color: #fff;
}
.tCategory_Wrap {
  background-color: #fff;
}
/* ----------------------------------------
.tab-area
---------------------------------------- */
.tab-area {
  padding: 7.5rem 0 0;
}
.tab-title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 2.6rem;
  padding: 1.82rem 2rem 1.82rem 4rem;
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 4rem;
}
/*************************************** 移送ポンプ */
.tab-title.transfer {
  background-color: #5cb531;
}
/*************************************** 汚水処理関連機器 */
.tab-title.wastewater {
  background-color: #009f3e;
}
/*************************************** 汚泥脱水機 */
.tab-title.dewatering {
  background-color: #008d43;
}
/*************************************** 高圧洗浄機 */
.tab-title.washers {
  background-color: #00afec;
}
/*************************************** 取水・加圧移送 */
.tab-title.boosting {
  background-color: #0091db;
}
/*************************************** その他関連機器 */
.tab-title.others {
  background-color: #0054a7;
}
.tab-img {
  display: flex;
  margin: 0 0 5rem;
}
.tab-img figure {
}
.tab-img figure img {
}
  #wastewater .tab-img figure{
    position: relative;
  }
  #wastewater .tab-img figure figcaption{
    position: absolute;
    bottom:1.5rem;
    right: 1.5rem;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;
     text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5), 0px 0px 10px rgba(0, 0, 0, 0.5);
  }


.tab-main {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 2.4rem;
  padding: 1.35rem 2rem 1.35rem 4rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 5rem;
}
/*************************************** 取水・加圧移送 */
.tab-main.boosting {
  color: #0091db;
  border: 1px solid #0091db;
}
/*************************************** その他関連機器 */
.tab-main.others {
  color: #0054a7;
  border: 1px solid #0054a7;
}
.tab-subtitle {
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3;
  margin: 0 0 1.5rem;
}
.tab-text {
  font-size: 1.6rem;
  line-height: 2;
}
/* ----------------------------------------
.bottom-area
---------------------------------------- */
.bottom-area {
}
.bottom-area picture {
  display: block;
  text-align: center;
}
.bottom-area picture img {
}
/* ----------------------------------------
.whole-area
---------------------------------------- */
.whole-area {
  padding: 6rem 0 16.5rem;
  background-color: #f2ecde;
}
.whole-area figure {
  text-align: center;
  margin: 0 auto 4rem;
  max-width: 63.6rem;
}
.whole-area figure img {
  width: 100%;
  height: auto;
}
.whole-slider {
}
.whole-slider li {
  margin: 0 1.5rem 0;
}
.whole-box {
  padding: 4rem 3rem 5rem;
  background-color: #fff;
  border-radius: 0.4rem;
}
.whole-lot {
  display: flex;
  margin: 0 0 4rem;
}
.whole-lot figure {
  margin: 0 2rem 0 0;
}
.whole-lot figure img {
  width: 9.7rem;
  height: auto;
}
.whole-text {
  font-size: 1.6rem;
  line-height: 2;
}
.whole-text sup {
  top: 0.5rem;
  margin: 0 0.5rem;
  font-size: 2.5rem;
}
/* ----------------------------------------
.brute-lot
---------------------------------------- */
.brute-lot {
}
.brute-tag {
  display: inline-block;
  font-size: 1.6rem;
  font-weight: bold;
  color: #0096e1;
  line-height: 1.3;
  border: 1px solid #0096e1;
  padding: 0.5rem 1rem;
  margin: 0 0 0.5rem;
}
.brute-title {
  font-size: 2.4rem;
  line-height: 1.3;
}
.brute-title span {
  font-weight: bold;
  color: #ee781e;
}
.brute-area {
  display: flex;
  margin: 0 0 2.5rem;
}
.brute-box {
  margin: 0 1.5rem 0 0;
}
.brute-box:last-child {
  margin: 0;
}
.brute-box figure {
  margin: 0 0 1rem;
}
.brute-box figure img {
  width: 100%;
  height: auto;
}
.brute-text {
  font-size: 1.4rem;
}
/* ----------------------------------------
.device-area
---------------------------------------- */
.device-area {
}
.device-area figure {
  max-width: none;
  margin: 0;
}
.device-area figure img {
  width: 22.6rem;
  height: auto;
  margin: 0 auto;
}
.device-text {
  font-size: 1.4rem;
  text-align: center;
  line-height: 1.5;
}
.device-text sup {
  top: 0.5rem;
  margin: 0 0.5rem;
  font-size: 2.2rem;
}
/* ----------------------------------------
.mold-list
---------------------------------------- */
.mold-list {
  display: flex;
  flex-wrap: wrap;
  margin: 5rem 0 0;
}
.mold-list li {
  margin: 0 3rem 7rem 0;
  width: calc((100% - 6rem) / 3);
}
.mold-list li:nth-child(3n) {
  margin: 0 0 7rem 0;
}
.mold-list li:last-child {
  margin: 0 0 11rem 0;
}
.mold-list li a {
}
.mold-list li a figure {
  margin: 0 0 2rem;
  border: 1px solid #e9ecee;
  position: relative;
  z-index: 0;
  transition:
    transform 0.5s ease-out,
    opacity 0.12s;
}
.mold-list li a.hover figure {
  background-color: #eaf0f2;
}
.mold-list li a figure span {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 1.4rem;
  color: #fff;
  font-weight: bold;
  padding: 0.5rem;
}
/*************************************** 汚物用 */
.mold-list li a figure span.filth {
  background-color: #d4a243;
}
/*************************************** 雑排水用 */
.mold-list li a figure span.drainage {
  background-color: #00b4ed;
}
/*************************************** 汚水用 */
.mold-list li a figure span.sewage {
  background-color: #1b7fbe;
}
/*************************************** 前処理用 */
.mold-list li a figure span.pretreatment {
  background-color: #50b6b1;
}
/*************************************** 曝気・撹拌用 */
.mold-list li a figure span.aeration {
  background-color: #1b7fbe;
}
/*************************************** スカム回収用 */
.mold-list li a figure span.scum {
  background-color: #915da3;
}
.mold-list li a figure img {
  transition:
    transform 0.5s ease-out,
    opacity 0.12s;
}
.mold-list li a.hover figure img {
  transform: scale(1.06);
  opacity: 0.8;
}
.mold-main {
  display: grid;
  grid-template-columns: 2.4rem 1fr;
  align-items: center;
  column-gap: 1.6rem;
  font-size: 2.1rem;
  font-weight: bold;
  position: relative;
  z-index: 0;
  margin: 0 0 0.5rem;
  transition:
    transform 0.5s ease-out,
    opacity 0.12s;
}
.mold-list li a.hover .mold-main {
  color: #0068b7;
}
.mold-main::before {
  content: "";
  aspect-ratio: 1;
  background-color: #0068b7;
  border-radius: 50%;
}
.mold-main::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0.9rem;
  width: 0.6rem;
  aspect-ratio: 1;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform-origin: right top;
  transform: rotate(45deg);
}
.mold-title {
  font-size: 1.6rem;
  font-weight: bold;
  line-height: 1.5;
  margin: 0 0 1rem;
}
.mold-title sup {
  top: 0.5rem;
  margin: 0 0.5rem;
  font-size: 2.5rem;
}
.mold-text {
  font-size: 1.4rem;
  line-height: 2;
}
.mold-special {
  display: block;
  text-align: center;
  width: 18rem;
  font-size: 1.6rem;
  color: #fff;
  font-weight: bold;
  padding: 1.39rem 0.5rem;
  background-color: #5cb531;
  border-radius: 10rem;
  box-shadow: 0 5px 5px -2px rgba(0, 0, 0, 0.2);
  margin: 2.5rem 0 0;
  transition: all 0.12s ease-out;
}
.mold-special.hover {
  background-color: #79ba56;
  box-shadow: none;
}
.mold-special span {
  position: relative;
  z-index: 0;
}
.mold-special span::after {
  content: "";
  position: absolute;
  top: 0.6rem;
  background-image: url(/images3/common/icon-blank.png);
  width: 1rem;
  height: 1rem;
  background-repeat: no-repeat;
  background-size: contain;
  margin-left: 0.6rem;
  filter: brightness(0) invert(1) opacity(0.8);
}
/* ----------------------------------------
.banner-area
---------------------------------------- */
.banner-area {
  padding: 6rem 0 11rem;
  border-top: 1px solid #e9ecee;
}
.banner-area a {
  display: block;
  max-width: 100rem;
  width: 100%;
  margin: 0 auto;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
  transition:
    box-shadow 0.12s,
    opacity 0.12s;
}
.banner-area picture {
  display: block;
}
.banner-area picture img {
}
.banner-area a.hover {
  opacity: 0.8;
  box-shadow: initial;
}
/* ----------------------------------------

---------------------------------------- */
/* ----------------------------------------

---------------------------------------- */