@charset "UTF-8";


/* main_ttl */
.rc-kanban._custom {
  background-color: #fff5df;
  z-index: 0;
}
.rc-kanban._custom .mainTtl {
  position: relative;
  z-index: 3;
}

/* .box */
.box {
  position: relative;
  width: 100%;
/*  height: 0px;
  padding-top: 65.63%;
  margin: auto;
  overflow: hidden;*/
}
.box .lead{
  text-align: center;
  font-size: 19.52px;
  color: #333;
  line-height: 1.54;
  font-weight: 600;
  position: absolute;
  width: 100%;
  left: 0;
  top: 165px;
  z-index: 3;
}
.box .button-list{
  width: 100%;
  position: absolute;
  left: 0;
  top: 288px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  z-index: 3;
}
.box .btn{ width: 231px;}
.box .btn._02{ margin-left: 31px;}
.box .btn a{
  display: block;
  width: 100%;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  line-height: 56px;
  border: 2px solid;
  -webkit-border-radius: 30.5px;
  -moz-border-radius: 30.5px;
  -ms-border-radius: 30.5px;
  -o-border-radius: 30.5px;
  border-radius: 30.5px;
  font-size: 24.4px;
  font-weight: bold;
  color: #ffffff;
  text-align: center;
}
.box .btn._01 a{
  border-color: #bf0000;
  background-color: #bf0000;
}
.box .btn._02 a{
  border-color: #ffffff;
}
.box._fadeIn .bgImg {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  height: 600px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto;
  opacity: 0;
/*  animation  : fade_anime_15 15s infinite; */
  -webkit-animation: fade_anime_15 15s 0s infinite linear;
  animation: fade_anime_15 15s 0s infinite linear;
  z-index: -1;
  width: 960px;
  margin: auto;
}
.box .src1 {
 background-image:url(https://r.r10s.jp/evt/event/pet/petwari/_pc/img/20201201/top/main_ttl_bg01.jpg);
  -moz-background-size: 100% auto;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
}
.box .src2 {
 background-image:url(https://r.r10s.jp/evt/event/pet/petwari/_pc/img/20201201/top/main_ttl_bg02.jpg);
  -moz-background-size: 100% auto;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  animation-delay  : 5s !important;
}
.box .src3 {
 background-image:url(https://r.r10s.jp/evt/event/pet/petwari/_pc/img/20201201/top/main_ttl_bg03.jpg);
  -moz-background-size: 100% auto;
  -webkit-background-size: 100% auto;
  background-size: 100% auto;
  animation-delay  : 10s !important;
}

/*
 keyframes
-------------------------------------------------*/
/* images3 15s */
@-webkit-keyframes fade_anime_15 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    z-index: 2;
    opacity: 1;
  }
  35% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 0;
  }
} @keyframes fade_anime_15 {
  0% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  25% {
    z-index: 2;
    opacity: 1;
  }
  35% {
    opacity: 0;
    transform: translateY(-100px);
  }
  100% {
    opacity: 0;
  }
}

@keyframes bgFadeIn {
   0% { opacity: 0; }
   5% { opacity: 1; }
  25% { opacity: 1; }
  33% { opacity: 1; }
  38% { opacity: 0; }
 100% { opacity: 0; }
}

/* top-bar */
.top-bar {
  background-color: #f59600;
}
.top-bar > * {
  display: block;
  width: 960px;
  margin: 0 auto;
}

/* sample */
.sampleList li {
  display: none;
}
.sampleList li.visible {
  display: block;
}