@charset "utf-8";

section.catch{
  position: relative;
  text-align: center;

  page-break-before: always;
}
section.catch .copy{
  margin: auto;
}
section.catch .copy .target{
  font-size: 16px;
  display: inline-block;
  margin-bottom: 16px;
  padding: 8px 16px;
  border: solid 2px #000;
  border-radius: 8px;
}
section.catch .copy .target2{
  font-size: 35px;
  line-height: 1.2em;
  margin-bottom: 16px;
}
section.catch .copy .subtitle{
  font-size: 29px;
  margin-bottom: 8px;
}
section.catch .copy h1{
  margin-bottom: 24px;
}
section.catch .copy h1 img{
  max-width: 500px;
  height: auto;
}
section.catch .copy .efficacy{
  margin-bottom: 16px;
}
section.catch .copy .efficacy img{
  max-width: 554px;
  height: auto;
}
section.catch .copy .description{
  font-size: 20px;
  width: 500px;
  margin: auto;
}
section.catch .copy .description span.point1{
  font-weight: bold;
  display: block;
  color: #f0a53b;
}
section.catch .copy .description span.point2{
  font-size: 18px;
  font-weight: bold;
  display: block;
  color: #b0272d;
}
section.catch .use{
  font-size: 12px;
  display: flex;
  justify-content: center;
  flex-flow: column nowrap;
  align-items: center;
  text-align: flex-start;
  gap: 10px;
}
section.catch .use img{
  width: 180px;
  height: auto;
}
section.catch .use p{
  line-height: 1;
}
section.catch .use1{
  position: absolute;
  top: 0;
  left: 40px;
}
section.catch .use2{
  position: absolute;
  top: 50%;
  left: 0;
  transform: translate(0, -50%);
}
section.catch .use3{
  position: absolute;
  bottom: 0;
  left: 40px;
}
section.catch .use4{
  position: absolute;
  top: 0;
  right: 40px;
}
section.catch .use5{
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(0, -50%);
}
section.catch .use6{
  position: absolute;
  right: 40px;
  bottom: 0;
}


@media screen and (max-width:1040px){
  section.catch img.kitchen,
  section.catch img.milk,
  section.catch img.toy,
  section.catch img.clothing{
    position: relative;
    top: 0;
    left: 0;
  }
  section.catch .copy .description{
    width: 100%;
    margin-bottom: 32px;
  }


  /*- use -*/
  section.catch .use{
    font-size: 12px;
    display: inline-block;
    text-align: center;
  }
  section.catch .use img{
    width: 180px;
    height: auto;
    margin-bottom: 8px;
  }
  section.catch .use1{
    position: relative;
    top: auto;
    left: auto;
  }
  section.catch .use2{
    position: relative;
    top: auto;
    left: auto;
    transform: translate(0, 0);
  }
  section.catch .use3{
    position: relative;
    bottom: auto;
    left: auto;
  }
  section.catch .use4{
    position: relative;
    top: auto;
    right: auto;
  }
  section.catch .use5{
    position: relative;
    top: auto;
    right: auto;
    transform: translate(0, 0);
  }
  section.catch .use6{
    position: relative;
    right: auto;
    bottom: auto;
  }
}
@media screen and (max-width:721px){
  section.catch .use{
    width: 30%;
  }
}
@media screen and (max-width:480px){
  section.catch .copy .target{
    font-size: 14px;
  }
  section.catch .copy .target2{
    font-size: 24px;
  }
  section.catch .copy .subtitle{
    font-size: 20px;
  }
  section.catch .use{
    width: 45%;
  }
}


section.lineup {
  page-break-before: always;
}


.main > section{
  margin-bottom: 80px;
}
header .mainvisual{
  margin: 80px auto 0;
  margin-bottom: 20px;
  border-radius: 10px;
}
/*slick setting*/
header .slick-prev:before,
header .slick-next:before{
  color: #000;
}
header .mainvisual img.pc1{
  display: inline-block;
  width: 468px;
}
header .wilkick{
  width: 100%;
  background-color: #005ba2;
}
header .wilkick .inner{
  position: relative;
  width: 1200px;
  height: 207px;
  margin: auto;
}
header .wilkick img{
  position: absolute;
}
header .wilkick img.text{
  bottom: 30px;
  width: 462px;
}
header .wilkick img.image{
  right: 0;
  bottom: 10px;
}
@media screen and (max-width:1040px){
  header .outer{
    height: auto;
  }
  header .wilkick{
    padding: 24px 0;
  }
  header .wilkick .inner{
    width: 90%;
    height: auto;
  }
  header .wilkick .inner img{
    position: relative;
  }
  header .wilkick img.sp1{
  }
}
@media screen and (max-width:721px){
}
@media screen and (max-width:480px){
  header .wilkick .inner img.sp1{
    display: none;
  }
  header .mainvisual{
    padding-right: 16px;
    padding-left: 16px;
    background-position: center bottom;
    background-size: auto 90%;
  }
}



/*- characteristic -*/
section.characteristic ul{
  justify-content: space-between;
  width: 100%;
}
section.characteristic li{
  font-size: 24px;
  font-weight: bold;
  margin: 4px;
  padding: 6px 16px;
  text-align: center;
  color: #fff;
  border-radius: 4px;
  background-color: #005ba2;
}
section.characteristic{
  margin-bottom: 80px!important;
}

/*- characteristic -*/
section.authorization .wrap{
  padding: 16px;
  text-align: center;
  border: solid 1px #000;
  line-height: 1.7em;
}
@media screen and (max-width:1040px){
  section.characteristic li{
    font-size: 14px;
    padding: 10px;
    text-align: center;
    letter-spacing: 0;
    color: #fff;
    border-radius: 8px;
    background-color: #005ba2;
  }
}
@media screen and (max-width:721px){
  section.characteristic ul{
    flex-wrap: wrap;
  }
}
@media screen and (max-width:480px){
  section.characteristic ul{
    display: block;
  }
  section.characteristic li{
    width: 100%;
  }
}


.effectiveness .description {
  margin-top: 20px;
  line-height: 1.7em;
}
.effectiveness .titleheader + .description {
  margin-top: 0;
}