@charset "utf-8";
/* CSS Document */
.container{
  width: 100%;
  height: 100%;
  margin-top: 0;
  text-align: left;
  background: url(/images/2nd_bg.jpg) 50% 0 repeat-y;
}
#purbdng h1{
  margin-bottom: 40px;
  text-align: center;
}
#purbdng h2{
  text-align: center;
}
#purbdng .purlst{
  margin-bottom: 20px;
}
#purbdng .purlst li{
  width: 250px;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
  color: #e70012;
}
#purbdng .purlst li img{
  display: block;
  margin: 0 auto;
}
#purbdng .purlst + p{
  margin-bottom: 20px;
  font-size: 1.6rem;
}
#purbdng .cmprbox{
  margin-bottom: 50px;
}
#purbdng .cmprbox .cmprtxt{
  width: 47%;
  font-size: 1.4rem;
}
#purbdng .cmprbox .cmprtxt h3{
  font-size: 2.4rem;
  font-weight: bold;
  text-align: center;
}
#purbdng .cmprbox .cmprtxt p img{
  display: block;
  margin: 0 auto 10px;
}
#purbdng .pntbox{
  margin-bottom: 50px;
}
#purbdng .pntbox div{
  width: 50%;
}
#purbdng .pntbox .txtbox{
  padding: 0 1em;
  font-size: 1.6rem;
}
#purbdng .pntbox:nth-of-type(1) .txtbox{
  width: 35%;
}
#purbdng .pntbox:nth-of-type(1) .pctbox{
  width: 65%;
}
#purbdng .pntbox:last-of-type{
  margin-bottom: 20px;
}
#purbdng .pntbox h3{
  display: table-cell;
  padding: 0;
  font-size: 2.4rem;
  font-weight: bold;
  text-align: left;
  vertical-align: middle;
  color: #ffffff;
  border-radius: 20px 5px;
  border: 0;
}
#purbdng .pntbox h3::before, #purbdng .pntbox h3::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  height: 100%;
  padding: .0em 1em;
}
#purbdng .pntbox h3 + p{
  margin-top: 30px;
}
#purbdng .fprnt{
  font-size: 1.6rem;
  font-weight: bold;
  text-align: center;
}
/* animation */
.anmt, .anmtslw, .at-anmt, .at-anmtslw, .txt-anmt{
  display: inline-block;
  position: relative;
  height: 100%;
}
.anmt span, .anmtslw span, .at-anmt span, .at-anmtslw span, .txt-anmt span{
  display: block;
  opacity: 0;
}
.txt-anmt span{
  padding: .7em 1em;
  border-radius: 20px 5px;
  background: #f49e00;
}
.anmt.animated span, .at-anmt.animated span{
  animation: boxshow 1s ease-in-out 0s forwards;
}
.at-anmtslw.animated span{
  animation: boxshow 1s ease-in-out .5s forwards;
}
.anmtslw.animated span{
  animation: slideshow 1s ease-in-out .5s forwards;
}
.txt-anmt.animated span{
  animation: slideshow 1s ease-in-out .3s forwards;
}
.txt-anmt.animated::before{
  opacity: 0;
  border-radius: 20px 5px;
  background: #e70012;
  animation: txtshow .7s ease .1s forwards;
}
.txt-anmt.animated::after{
  border-radius: 20px 5px;
  background: #ffffff;
  animation: txtshow0 .3s ease 0s forwards;
}
@keyframes boxshow{
  0%{
    opacity: 0;
    transform: translateY(70px);
  }
  100%{
    opacity: 1;
    transform: translateY(0px);
  }
}
@keyframes slideshow{
  0%{
    opacity: 0;
    transform: translateX(-70px);
  }
  100%{
    opacity: 1;
    transform: translateX(0px);
  }
}
@keyframes txtshow{
  0%{
    left: 0;
    opacity: 0;
    width: 0;
  }
  70%{
    left: 0;
    width: 100%;
    background: #e70012;
  }
  100%{
    left: 100%;
    opacity: 1;
    width: 0;
    padding: .0em .5em;
    background: #cccccc;
  }
}
@keyframes txtshow0{
  0%{
    left: 0;
    opacity: 1;
    width: 100%;
  }
  70%{
    left: 0;
    opacity: 1;
    width: 100%;
  }
  100%{
    left: 0;
    opacity: 0;
    width: 0;
  }
}
.addbox{
  margin: 70px auto 30px;
  padding: 70px 0 0;
  border-top: 1px solid #cccccc;
}
.addbox h2 span{
  display: block;
  font-size: 1.4rem;
}
.addbox h3{
  margin: 30px auto 25px !important;
  text-align: center;
  border: 0;
}
.addbox .addcnt p{
  width: 48%;
  font-size: 1.6rem;
}
.addbox .addcnt .imgbox img{
  width: 100%;
}
@media screen and (max-width: 767px){
  #purbdng .purlst li{
    width: 30%;
    margin: 0 1%;
    font-size: 1.8rem;
    line-height: 1.4em;
  }
  #purbdng .cmprbox .cmprtxt h3{
    font-size: 1.8rem;
  }
  #purbdng .pntbox .txtbox{
    padding: 0 1em;
    font-size: 1.6rem;
  }
  #purbdng .pntbox .txtbox{
    width: 100% !important;
  }
  #purbdng .pntbox .pctbox{
    width: 100% !important;
  }
  .addbox{
    margin: 40px auto 40px;
    padding: 40px 0 0;
  }
  .addbox h2{
    font-size: 1.8rem;
  }
  .addbox h2 span{
    font-size: 1.2rem;
  }
  .addbox h3{
    margin: 30px auto 15px !important;
  }
  .addbox .addcnt p{
    width: 100%;
    margin: 0 auto;
  }
  .addbox .addcnt .imgbox img{
    width: 100%;
  }
}