@charset "utf-8";

.achievement{
  margin-bottom:5rem;
  max-width:1345px;
}

.achievement-label{
  width:fit-content;
  color:#FF7006;
  font-weight:bold;
  font-size:14px;
  margin:0 auto 16px;
  position:relative;
}

.achievement-label::before{
  content:"";
  position:absolute;
  width:180px;
  aspect-ratio:180/64;
  top: 0%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background:url(https://colors-s.com/system_panel/uploads/images/20251218175335480373.png) no-repeat center/contain;
}

.achievement h2{
  font-size:clamp(1.125rem, 0.807rem + 1.06vw, 2rem);
  text-align:center;
  margin-bottom:1.5rem;
}

.achievement-wrap{
  display:flex;
  justify-content:space-between;
  background:#fff;
  padding:2.5rem 1.5rem;
  border-top:10px solid #FFA908;
}

.achievement-img{
  width:30%;
}

.achievement-txt{
  width:65%;
  color:#1F2C5C;
}

.achievement-txt h3{
  font-size:clamp(1rem, 0.955rem + 0.15vw, 1.125rem);
  color:#fff;
  border-bottom:6px solid #FFA908;
  margin-bottom:20px;
}

.achievement-txt p:not(:last-child){
  margin-bottom:1.5rem;
}

.achievement-txt p + p{
  text-align:right;
}

.achievement-txt h3 strong{
  background:#FFA908;
  padding:8px 8px 2px;
  width:fit-content;
}

.slider-thumbnail .swiper-slide {
  opacity: .5;
  transition: opacity .5s;
  width: calc(100% / 3);
}
.slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
  opacity: 1;
}
/* レイアウトのためのスタイル */
.swiper {
  max-width: 500px;
  width: 100%;
}
.swiper-slide img {
  height: auto;
  width: 100%;
}

.slider-thumbnail{
  margin-top:0.5rem;
}

.swiper-slide img {
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

@media screen and (max-width: 1024px) {
  .achievement-wrap{
    flex-direction: column;
    gap: 1.5rem;
    align-items: center;
  }
  .achievement-img {
    width: 50%;
  }
  .achievement-txt {
    width: 100%;
  }
}

@media (max-width: 767px) {
  .achievement-img {
    width: 100%;
  }
  .achievement-txt h3{
    border-bottom: 3px solid #FFA908;
  }
  .achievement-txt h3 strong{
    padding: 8px 8px 6px;
  }
  .main{
    padding: 5rem 0 5rem;
  }
  .achievement-label::before{
    width: 160px;
    top: -40%;
  }
}