@charset "utf-8";

.bg__container {
  position: relative;
}

.bg__container::before {
  content: "";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: url(/library/img/content__bg.jpg) center/cover no-repeat;
  z-index:-1;
}

.content__bg {
  background-color: rgba(255,255,255,0);
  padding: 40vw 0 0;
}

.catalog__container {
  width: 90vw;
  margin: 0 auto 20vw;
  background-color: #fff;
  padding-bottom: 5vw;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.4);
}

.tag__new {
  position: absolute;
  width: 20vw;
} 

.brand__ex {
  width: 90vw;
}

.brand__catch {
  display: block;
  width: 80vw;
  margin: 10vw auto 0;
}

.brand__txt {
  width: 90vw;
  font-size: 2.8vw;
  font-weight: 400;
  text-align: center;
  margin: 10vw auto 0;
  line-height: 2;
}

.intrr__container, .sample__container {
  width: 80vw;
  display: flex; 
  gap: 2vw;
  margin: 10vw auto 0;
}

.intrr__container {
    margin: 5vw auto 0;
}

.intrr__sample {
  width: 39vw;
}

.catalog__sample {
  width: 39vw;
  box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.4);
}

.checkBox__bg {
  width: 78vw;
  margin: 5vw auto 0;
  padding: 2vw 1vw;
  background-color: #8cc638;
}

.checkBox__bg input[type=checkbox] {
  opacity: 0;
}
.checkbox01 {
  box-sizing: border-box;
  cursor: pointer;
  display: inline-block;
  padding: 5px 25px;
  position: relative;
  width: 70vw;
  color: #ffffff;
  font-size: 4vw;
  font-weight: 400;
}
.checkbox01::before {
  background: #fff;
  border: 1px solid #fff;
  content: '';
  display: block;
  height: 16px;
  left: 0;
  margin-top: -8px;
  position: absolute;
  top: 50%;
  width: 16px;
}
.checkbox01::after {
  border-right: 3px solid #231815;
  border-bottom: 3px solid #231815;
  content: '';
  display: block;
  height: 9px;
  left: 5px;
  margin-top: -7px;
  opacity: 0;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 5px;
}
input[type=checkbox]:checked + .checkbox01::after {
  opacity: 1;
}

/* --------------------------------------pc----------------------------------------- */

@media only screen and (min-width: 960px) {

.catalog__container {
  width: 1000px;
  margin: 200px auto;
  padding-bottom: 50px;
}

.content__bg {
  padding: 200px 0 0;
}

.tag__new {
  width: 200px;
} 


.brand__ex {
  width: 1000px;
}

.brand__catch {
  width: 700px;
  margin: 100px auto 0;
}

.brand__txt {
  width: 900px;
  font-size: 20px;
  margin: 100px auto 0;
}

.intrr__container, .sample__container {
  width: 800px; 
  gap: 20px;
  margin: 100px auto 0;
}

.intrr__container {
  margin: 50px auto 0;
}

.intrr__sample, .catalog__sample {
  width: 390px;
}

.checkBox__bg {
  width: 780px;
  margin: 50px auto 0;
  padding: 0px 10px 40px 40px;
  line-height: 0;
}

.checkbox01 {
  padding: 1px 40px;
  width: 750px;
  font-size: 30px;
}
.checkbox01::before {
  height: 30px;
  margin-top: -15px;
  top: 50%;
  width: 30px;
}
.checkbox01::after {
  border-right: 6px solid #231815;
  border-bottom: 6px solid #231815;
  height: 20px;
  left: 8px;
  margin-top: -15px;
  position: absolute;
  top: 50%;
  transform: rotate(45deg);
  width: 10px;
}

}