@charset "utf-8";
/* CSS Document */
.toothbrush {
  width: 100%;
  margin-bottom: 5em;
  background-image: url("../img/toothbs/bg05.png"), url("../img/toothbs/bg01_pc.jpg");
  background-size: 100%;
  background-position: center bottom, center top;
  background-repeat: no-repeat;
  padding: 100px 0 650px;
}
.toothbrush .sec01 {
  width: 100%;
  padding: 0 5%;
  margin-bottom: 1em;
}
.toothbrush .sec01 h2 {
  text-align: right;
  margin-bottom: 2em;
}
.matomecartbox {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
  width: 65%;
  margin-top: 5em;
}
.matomecartboxitem {
  border: solid 2px rgba(200, 203, 201, 0.80);
  padding: 1em 1.5em;
  margin-bottom: 1em;
  background-color: #fff;
  border-radius: 8px;
  width: 48%;
}
.matomecartboxitem {
  display: flex;
  justify-content: space-around;
    text-align: center;
}
.matomecartboxitem .itemimg {
  width: 50px;
  margin-right: 10px;
}
.matomecartboxitem .itemname {
  font-weight: bold;
  font-size: 1.3em !important;
  text-align: center;
}
.matomecartboxitem .itemprice {
  border-bottom: solid 1px rgba(200, 203, 201, 1.00);
  font-size: 0.9em;
  text-align: center;
}
.matomecartboxitem .itemprice span {
  font-size: 0.8em;
}
.matomecartboxitem:last-child {
  width: 100%;
  border: none;
  background: none;
  display: grid;
  font-size: 1.6em;
  font-weight: bold;
  padding: 0;
  margin-top: 1.4em;
  justify-content: stretch;
}
.toothbrush .sec02 {
  background-image: url("../img/toothbs/bg02_pc.png");
  background-repeat: no-repeat;
  background-position: center top;
  padding: 8em 0em 5em;
  margin: 0 auto 4em;
  text-align: center;
  position: relative;
}
.water01 {
  position: absolute;
  right: 12%;
  top: 5%;
}
.water02 {
  position: absolute;
  left: 10%;
  bottom: -3%;
}
.toothbrush .sec02 .mvbox {
  width: 65%;
  margin: 0 auto;
}
.toothbrush .sec02 .mvbox video {
  width: 100%;
}
.toothbrush .sec03 {
  text-align: center;
  margin-bottom: 3em;
}
.toothbrush .sec04 {
  text-align: center;
  margin-bottom: 4em;
}
.toothbrush .sec05 {
  text-align: center;
  margin-bottom: 4em;
}
.toothbrush .sec06 {
  text-align: center;
}
img.endimg {
  width: 100%;
  padding: 0;
  margin: 0
}
.toothbrush .sec07 {
  padding: 1em 5em 1em;
}
.pconly {
  display: block;
}
.sponly {
  display: none;
}
input.submitbtn01 {
  background: -webkit-linear-gradient(#ffb131, #f39700);
  border-radius: 4px;
  border: none;
  color: #fff;
  display: inline-block;
  overflow: hidden;
  padding:22px 15px;
  position: relative;
  text-decoration: none;
  cursor: pointer;
  font-size: 1.2em;
  letter-spacing: 0.3em;
  font-weight: bold;
}
input.submitbtn01::after {
  animation: 3s 0s shine linear infinite;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, .6) 50%, rgba(255, 255, 255, 0) 75%);
  content: '';
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transform: skewX(-15deg);
  width: 100%;
}
input.submitbtn01:hover {
  opacity: 0.9;
}
@keyframes shine {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
select {
  margin-top: 0.5em;
  /* appearance: none; */
  font-size: 1em;
  padding: 0.5em;
  color: #6c6c6c;
  border-radius: 5px;
  border-color: #c8cbc9;
}
/****************************************************************************************
SP
****************************************************************************************/
@media screen and (max-width: 768px) {
  .toothbrush {
    width: 100%;
    margin-bottom: 4em;
    background-image: url("../img/toothbs/bg05.png"), url("../img/toothbs/bg01_sp.jpg");
    background-size: 100%;
    background-position: center bottom, center top;
    background-repeat: no-repeat;
    padding: 1.5em 0 200px;
  }
  .toothbrush .sec01 {
    width: 100%;
    padding: 3% 1.5% 2%;
    margin-bottom: 4em;
  }
  .toothbrush .sec01 h2 {
    margin-bottom: 8em !important;
    width: 75%;
    margin-left: 25%;
  }
  .matomecartbox {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 5em;
    justify-content: space-around;
  }
  .matomecartboxitem {
    display: flex;
    flex-direction: column;
    align-items: center;
    border: solid 2px rgba(200, 203, 201, 0.80);
    padding: 0.5em;
    margin: 0;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 1em;
  }
    
    
  .matomecartboxitem .itemname {
    font-weight: bold;
    font-size: 1.12em !important;
    text-align: center;
}
.matomecartboxitem:last-child {
    width: 100%;
    border: none;
    background: none;
    display: grid;
    font-size: 1.6em;
    font-weight: bold;
    padding: 0;
    margin-top: 0.5em;
    justify-content: stretch;
}    
  .toothbrush .sec02 {
    background-image: url("../img/toothbs/bg02_pc.png");
    background-repeat: no-repeat;
    background-position: center top;
    padding: 5em 0em 2em;
    margin: 0 auto 4em;
  }
  .toothbrush .sec02 h2 img {
    padding: 0 1em;
  }
  .toothbrush .sec02 .mvbox {
    width: 90%;
  }
  .water01 {
    position: absolute;
    right: 6%;
    top: -5%;
    width: 23%;
  }
  .water02 {
    width: 26%;
    position: absolute;
    left: -10%;
    bottom: -7%;
  }
  .toothbrush .sec03 {
    width: 96%;
    margin: 0 auto;
  }
  .toothbrush .sec07 {
    padding: 1em 1.5em 1em;
  }
  .pconly {
    display: none;
  }
  .sponly {
    display: block;
  }
  input.submitbtn01 {
    background: -webkit-linear-gradient(#ffb131, #f39700);
    border-radius: 4px;
    border: none;
    color: #fff;
    display: inline-block;
    overflow: hidden !important;
    padding: 15px;
    position: relative;
    text-decoration: none;
    cursor: pointer;
    font-size: 1.2em;
    letter-spacing: 0.3em;
    font-weight: bold;
    height: 2.5em;
  }
}