@charset "utf-8";

.onlinemuseum .collection-lyt-wrapper {
  max-width: 1130px;
  margin: 0 auto;
}

/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media (max-width:768px) {
  #section-greeting .lead-text {
    width: calc(100% - 28px);
    margin: var(--size32) auto;
  }
}


/* section-library
------------------------------------*/
.onlinemuseum .section-library {
  background: #fff;
  margin: 49px auto 0;
}

.onlinemuseum .section-library .inner-s-wrap {
  width: calc(100% - 28px);
  margin: var(--size32) auto;
}

.onlinemuseum .library-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
  margin: 0 auto;
}

.onlinemuseum .library-list-col {
  position: relative;
  width: 48%;
}

.onlinemuseum .library-list-title {
  position: relative;
  color: #fff;
  font-size: 2.4rem;
  line-height: 1.5;
  margin: 0 0 20px;
  padding: 6px 9px 7px;
  filter: drop-shadow(0px 5px 3px rgba(0, 0, 0, 0.4));
  z-index: 0;
}

.onlinemuseum .library-list-title .model {
  font-size: 2rem;
  line-height: 1.5;
  margin-left: 10px;
}
.onlinemuseum .library-list-title::after {
  content: "";
  background: #fff;
  position: absolute;
  left: 9px;
  bottom: 10px;
  width: 96%;
  height: 1px;
}

.onlinemuseum .library-list-title.ea52::before {
  background: url("/campaign/boxer60th-anniversary/library/assets/img/top/img-ea52-pc.webp") no-repeat;
  background-size: cover;
}

.onlinemuseum .library-list-title.ej20::before {
  background: url("/campaign/boxer60th-anniversary/library/assets/img/top/img-ej20-pc.webp") no-repeat;
  background-size: cover;
}

.onlinemuseum .library-list-title.ez30::before {
  background: url("/campaign/boxer60th-anniversary/library/assets/img/top/img-ez30-pc.webp") no-repeat;
  background-size: cover;
}

.onlinemuseum .library-list-title.fb20::before {
  background: url("/campaign/boxer60th-anniversary/library/assets/img/top/img-fb20-pc.webp") no-repeat;
  background-size: cover;
}

.onlinemuseum .library-list-title.fa20::before {
  background: url("/campaign/boxer60th-anniversary/library/assets/img/top/img-fa20-pc.webp") no-repeat;
  background-size: cover;
}

.onlinemuseum .library-list-title.fb25::before {
  background: url("/campaign/boxer60th-anniversary/library/assets/img/top/img-fb25-pc.webp") no-repeat;
  background-size: cover;
}

.onlinemuseum .library-list-title.cb18::before {
  background: url("/campaign/boxer60th-anniversary/library/assets/img/top/img-cb18-pc.webp") no-repeat;
  background-size: cover;
}

.onlinemuseum .library-list-title.eg33kai::before {
  background: url("/campaign/boxer60th-anniversary/library/assets/img/top/img-eg33-kai-pc.webp") no-repeat;
  background-size: cover;
}

.onlinemuseum .library-list-title::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.onlinemuseum .model-col {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
}
.onlinemuseum .library-link {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  max-width: 250px;
  width: 100%;
}

.onlinemuseum .library-img {
  position: relative;
  padding: 0 0 9px;
  max-width: 250px;
  width: 100%;
  margin: auto;
}

.onlinemuseum .library-text {
  color: #313131;
  font-size: 1.6rem;
  font-size: min(1.8vw, 1.6rem);
  font-weight: bold;
  line-height: 1.5;
  font-feature-settings: "palt";
  width: 100%;
  height: 50px;
}

.onlinemuseum .library-btn {
  border: 1px solid #446fb2;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 80%;
  height: 35px;
  background: #446fb2;
  border-radius: 30px;
  transition: all 300ms;
  cursor: pointer;
  outline: none;
  margin: 20px auto 0;
  padding: 4px 10px;
}
.onlinemuseum .library-btn a {
  display: block;
}

.onlinemuseum .library-btn .btn-text {
  color: #fff;
  font-size: 1.6rem;
  text-align: center;
  display: block;
  width: 100%;
  position: relative;
}

.onlinemuseum .library-btn:hover {
  background: #fff;
  border: 1px solid #446fb2;
}

.onlinemuseum .library-btn:hover .btn-text {
  color: #446fb2;
}


/* ---------------------------------------------  */
/* --------------------- SP --------------------  */
/* ---------------------------------------------  */
@media (max-width:768px) {
  .onlinemuseum .library-list {
    gap: 0;
    margin: var(--size32) auto;
  }

  .onlinemuseum .library-list-col {
    width: 100%;
  }

  .onlinemuseum .model-col {
    gap: 15px;
    margin-bottom: 40px;
  }

  .onlinemuseum .library-link {
    max-width: 100%;
    width: 49%;
  }

  .onlinemuseum .library-list-title {
    margin: 0 0 17px;
    padding: 4px 9px 5px;
  }

  .onlinemuseum .library-list-title::after {
    bottom: 8px;
  }

  .onlinemuseum .library-img {
    max-width: 100%;
    width: 100%;
  }

  .onlinemuseum .library-text {
    font-size: 1.5rem;
  }

  .onlinemuseum .library-btn {
    height: 30px;
    margin: 10px auto 0;
  }
}