/* ===header-img=== */
/*! CSS Used keyframes */
@keyframes fadeSlideImg01 {
  0% {
    opacity: 1;
  }

  33% {
    opacity: 0;
    filter: blur(0);
  }

  66% {
    opacity: 0;
    filter: blur(15px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
  }
}

@keyframes fadeSlideImg02 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 1;
    filter: blur(0);
  }

  66% {
    opacity: 0;
    filter: blur(15px);
  }

  100% {
    opacity: 0;
    filter: blur(15px);
  }
}

@keyframes fadeSlideImg03 {
  0% {
    opacity: 0;
  }

  33% {
    opacity: 0;
    filter: blur(0);
  }

  66% {
    opacity: 1;
    filter: blur(0);
  }

  100% {
    opacity: 0;
    filter: blur(15px);
  }
}

.content-header__txt {
  z-index: 3;
}

.fadeSlider {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

.fadeSlider span[class^='fadeSlider'] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  z-index: 2;
}

.fadeSlider span.fadeSlider_01 {
  background-image: url(/img/product/paper_pulp/motor_drive/bg_header_index_01.webp);
  animation: fadeSlideImg01 15s ease-out infinite;
  animation-delay: 3s;
}

.fadeSlider span.fadeSlider_02 {
  opacity: 0;
  background-image: url(/img/product/paper_pulp/motor_drive/bg_header_index_02.webp);
  animation: fadeSlideImg02 15s ease-out infinite;
  animation-delay: 3s;
}

.fadeSlider span.fadeSlider_03 {
  opacity: 0;
  background-image: url(/img/product/paper_pulp/motor_drive/bg_header_index_03.webp);
  animation: fadeSlideImg03 15s ease-out infinite;
  animation-delay: 3s;
}

.list-3col1 {
  display: flex;
  flex-wrap: wrap;

  justify-content: center;
}

.list-3col1 .item {
  text-align: center;
  width: 330px;
}


/* 画像 */
.system_image {
  margin-bottom: 0;
}

/* タブ */
.tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 50px;

}

.tab {
  padding: 13px 40px;
  border: none;
  font-size: 20px;
  cursor: pointer;
  transition: 0.3s;
  border-bottom: 4px solid #ccc;
  background: #fff;
  position: relative;
  color: #000;
}

.tab.open {
  transition: .3s;
}

.tab.open::before {
  content: "";
  display: block;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -12px;
  width: 16px;
  height: 16px;
  box-sizing: border-box;
  background-color: #0C76B5;
  rotate: 135deg;
  translate: -50%;
  z-index: -1;
  transition: .3s;
}

.tab[data-target="paper"].open {
  border-bottom: 4px solid #0C76B5;
}

.tab[data-target="coater"].open {
  border-bottom: 4px solid #9ABA2E;
}

.tab[data-target="winder"].open {
  border-bottom: 4px solid #DF8112;
}

.tab[data-target="coater"].open::before {
  background-color: #9ABA2E;
}

.tab[data-target="winder"].open::before {
  background-color: #DF8112;
}

/* コンテンツ */
.tab-content {
  display: none;
  padding: 60px 0;
}

.tab-content.is-open {
  display: block;
}

.blue {
  background: rgba(12, 118, 181, 0.10);
}

.green {
  background: rgba(154, 186, 46, 0.10);
}

.orange {
  background: rgba(223, 129, 18, 0.10);
}



.inner {
  padding: 0 20px;
  margin: auto;
  text-align: center;
}

.inner h2 {
  font-size: 32px;
  margin-bottom: 20px;
}

.lead {
  margin-bottom: 60px;
}

/* カード */
.tab-content .description,
.tab-content .link-website {
  opacity: 1;
}

.card-wrapper {
  margin-top: 50px;
  display: flex;
  gap: 30px;
  justify-content: center;
}

.card {
  background: #fff;
  padding: 0 20px 80px;
  display: grid;
  gap: 20px;
  position: relative;
}

.card img {
  max-width: 100%;
}

.card .card_ttl {
  font-size: 20px;
}

.card .card_text {
  font-size: 16px;
  line-height: 1.4;
}

.card .website-area {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
}

.content-section .card .text {
  position: relative;
  padding: 0 50px 0 30px;
}

.card .link-website a .text::after {
  position: absolute;
  right: 0;
  top: 2px;
  margin: 0;
  padding-left: 0px;
}

.card .link-website a {
  max-width: 240px;
  width: 100%;
  margin: 0 auto;
  padding: 10px 0px 8px 0;
  font-size: 16px;
}

/* ul.list-3col2 */
.list-small {
  font-size: 16px;
}

.list-3col .item,
.list-3col .item_detail {
  display: grid;
  gap: 10px;
}

.list-3col .item_detail p {
  color: #11335F;
  font-size: 16px;
}
.before-after-area.before-after-area1 .item.before {
  width: 230px;
  margin-left: 170px;
}
.before-after-area.before-after-area2 .item.before,
.before-after-area.before-after-area3 .item.before{
    width: 290px;
    margin-left: 110px;
}
@media screen and (max-width: 1200px) {
    .before-after-area.before-after-area1 .item.before,
  .before-after-area.before-after-area2 .item.before,
.before-after-area.before-after-area3 .item.before{
    width: auto;
    margin-left: 0;
}
}

@media screen and (max-width: 768px) {
  .tab{
        width: calc(100% / 3);
    font-size: 16px;
  padding: 10px 10px;

    border-bottom: 2px solid #ccc;
  }
.card-wrapper{
  flex-wrap: wrap;
  gap: 20px;
}
.card{
    width: calc(80% / 2);
}
.tab[data-target="paper"].open {
  border-bottom: 2px solid #0C76B5;
}

.tab[data-target="coater"].open {
  border-bottom: 2px solid #9ABA2E;
}

.tab[data-target="winder"].open {
  border-bottom: 2px solid #DF8112;
}
.tab.open::before{
      bottom: -8px;
    width: 14px;
    height: 14px;
}
.card .card_ttl{
font-size: 18px;
}
.card .card_text{
    font-size: 14px;
}
}
@media screen and (max-width: 600px) {
.card{
  width: 100%;
    max-width: 400px;
}
}