@charset "UTF-8"; 
body {
	display: none;
}

/* =====
   ヘッダー
===== */
.header__topic {
    color: var(--primary-black); 
}
.toggle_btn span {
    background-color: var(--primary-black);
}
/* =====
   ヘッダーエンド
===== */



/* =====
   ワーク
===== */
.work {
    margin-top: 53.5px;
}

.work__box:nth-of-type(1) {
    padding-bottom: 100px;
}

.work__box_1 {
    width: 925px;
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
    gap: 20px;
    margin-top: 50px;
}

.work__txt {
    text-align: center;
    font-family: var(--primary-font02);
    font-size: 3rem;
    font-weight: 600;
}

.work__imgbox {
    overflow: hidden;
    transition: 0.6s;
}

.work__img {
    display: block;
    width: 295px;
    height: 280px;
    object-fit: cover;
    object-position: center;
    transition: 1s;
}

.work__imgbox:hover {
    opacity: .85;
}

.work__img:hover {
    transform: scale(1.1);
}

/* 2024画像位置 */
.work__img2024_01 {
    object-position: 50% 20%;
}
.work__img2024_02 {
    object-position: 70% 30%;
}
.work__img2024_03 {
    object-position: 70% 25%;
}
.work__img2024_04 {
    object-position: 70% 0%;
}

/* 2023画像位置 */
.work__img2023_01 {
    object-position: 50% 30%;
}
.work__img2023_03 {
    object-position: 50% 20%;
}

@media screen and (max-width: 1080px) {
    .work {
        margin-top: 50px;
    }
    .work__box_1 {
        gap: 15px;
        width: 693px;
    }
    .work__img {
        width: 220px;
        height: 209px;
    }
}

@media screen and (max-width: 820px) {
    .work__box_1 {
        gap: 13px;
        width: 587px;
    }
    .work__img {
        width: 187px;
        height: 177px;
    }
    .work__txt {
        font-size: 2.2rem;
    }
    .work__box_1 {
        margin-top: 35px;
    }
}

@media screen and (max-width: 769px) {
    .work {
        margin-top: 50px;
    }
    .work__box {
        padding-top: 60px;
    }
    .work__box:nth-of-type(1) {
        padding-bottom: 0px;
        padding-top: 0px;
    }
    .work__txt {
        font-size: 1.6rem;
    }
    .work__box_1 {
        gap: 9px;
        width: 513px;
        margin-top: 20px;
    }
    .work__img {
        width: 165px;
        height: 157px;
    }
}

@media screen and (max-width: 580px) {
    .work__box_1 {
        width: 339px;
    }
}
/* =====
   ワークエンド
===== */



/* =====
   ワークアニメーション
===== */
.top01 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 2.5s, opacity 4s;
  }
.top01.open {
    transform: translateY(0);
    opacity: 1;
  }

.top02 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 2s, opacity 4s;
  }
.top02.open {
    transform: translateY(0);
    opacity: 1;
  }

.top03 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 3.5s, opacity 4s;
  }
.top03.open {
    transform: translateY(0);
    opacity: 1;
  }
 
.top04 {
    transform: translateY(100px);
    opacity: 0;
    transition: transform 4s, opacity 4s;
  } 
.top04.open {
    transform: translateY(0);
    opacity: 1;
  }

.top05 {
    transform: translateY(100px);
    opacity: 0;
    transition: transform 3.5s, opacity 4s;
  }  
.top05.open {
    transform: translateY(0);
    opacity: 1;
  }

.top06 {
    transform: translateY(100px);
    opacity: 0;
    transition: transform 3s, opacity 4s;
  } 
.top06.open {
    transform: translateY(0);
    opacity: 1;
  }

  @media screen and (max-width: 580px) {
    .top01 {
        transform: translateY(50px);
      }
    .top02{
        transform: translateY(50px);
      }
    .top03 {
        transform: translateY(80px);
      }
    .top04 {
        transform: translateY(80px);
      }
    .top05 {
        transform: translateY(110px);
      }
    .top06 {
        transform: translateY(110px);
        transition: transform 4s, opacity 4s;
      }
}







  .inview01 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 3s, opacity 2s;
  }
  .inview01.show {
    transform: translateY(0);
    opacity: 1;
  }

  .inview02 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 2.5s, opacity 2s;
  }
  .inview02.show {
    transform: translateY(0);
    opacity: 1;
  }

  .inview03 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 4s, opacity 2s;
  } 
  .inview03.show {
    transform: translateY(0);
    opacity: 1;
  }

  .inview04 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 3s, opacity 2s;
  } 
  .inview04.show {
    transform: translateY(0);
    opacity: 1;
  }

  .inview05 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 4s, opacity 2s;
  }
  .inview05.show {
    transform: translateY(0);
    opacity: 1;
  }

  .inview06 {
    transform: translateY(80px);
    opacity: 0;
    transition: transform 3.5s, opacity 2s;
  } 
  .inview06.show {
    transform: translateY(0);
    opacity: 1;
  }

@media screen and (max-width: 580px) {
    .inview01 {
        transform: translateY(60px);
      } 
    .inview02 {
        transform: translateY(60px);
      } 
    .inview03 {
        transform: translateY(60px);
      } 
    .inview04 {
        transform: translateY(60px);
      } 
    .inview05 {
        transform: translateY(60px);
      } 
    .inview06 {
        transform: translateY(60px);
      } 
}