@charset "utf-8";
/* CSS Document */


/*activity*/
.activity{
	margin-top: 80px;
	/*display: inline-block;*/
}
.activity:first-of-type {
margin: 0;
}
.activity h2{
	position: relative;
 padding: 1.5rem 0;
 font-size: 18px;
 color: #000000;
}
.activity h2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 10px;
  content: '';
  background-image: -webkit-repeating-linear-gradient(135deg, #333, #333 1px, transparent 2px, transparent 5px);
  background-image: repeating-linear-gradient(-45deg, #333, #333 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.activity .hotels{
	margin-top: 2rem;
}
.activity .hotels li{
	display: flex;
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
    flex-wrap: wrap;
	justify-content: space-between;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
	margin-top: 40px;
}
.activity .hotels li:first-child{
	margin-top: 0;
}
.activity .hotels li .imageS{
  width: 32%;
  position: relative;
  height: auto;
  overflow: hidden;
  float: none;
}
 
@keyframes slideshow{
  0%{
    opacity: 0;
  }
 /* 10%{
    opacity: 1;
  }*/
  28%{
    opacity: 1
  }
  55%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}
 
.activity .hotels li .imageS img {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, 0);
  height: auto;
  opacity: 0;
  animation :slideshow 16s linear infinite;
}
/* 
.activity .hotels li .image img:nth-child(2){
  animation-delay: 8s;
}
 */
.activity .hotels li .imageS img:last-child{
  animation-delay: 8s;
}

.activity .hotels li .image{
	width: 32%;
}


.activity .hotels li .detail{
	width: 65%;
}

.activity .hotels li .detail .schedule{
	margin-top: 1rem;
	line-height: 2;
}
.activity .hotels li .detail .schedule dt{
color: #fff;
float: left;
clear: left;
margin-right: 5px;
background: #000;
padding: 0 6px;
line-height: 1.5;
margin-top: 5px;
font-size: small;
}


.activity .hotels li .detail .schedule dl.timetable{
	margin-top: 0;
}
.activity .hotels li .detail .schedule dl.timetable dt{
float: left;
clear: left;
margin-right: 5px;
background: #eee;
color: #000;
padding: 0 6px;
line-height: 1.5;
margin-top: 5px;
font-size: small;
width:9rem;
text-align: right;
}

@media only screen and (max-width: 700px){

.activity .hotels li {
	/* width: 70.15%; */
	width: 86.568%;
	display: inherit;
	flex-wrap: inherit;
	justify-content: inherit;
	-webkit-box-pack: inherit;
	-webkit-justify-content: inherit;
	-ms-flex-pack: inherit;
	margin: 25px auto 0;
}

.activity .hotels li .image {
	width: 100%; 
	margin: 0 auto;
}
 .activity .hotels li .imageS {
	width: 100%;
	min-height: 300px;
}
.activity .hotels li .imageS img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: auto;
    opacity: 0;
    animation: slideshow 16s linear infinite;
}
.activity .hotels li .detail {
	width: 100%;
	margin-top: 15px;
}

.activity .hotels li .detail .schedule {
	margin-top: 20px;
}
.activity .hotels li .detail .btnarea {
	text-align: left;
	margin-top: 20px;
}
.activity .hotels li .detail .btnarea li {
	width: 100%;
	max-width: inherit;
	margin-top: 15px;
}
.activity .hotels li .detail .btnarea li:first-child {
	margin: 0;
}
.activity .hotels li .detail .btnarea li:first-child a {
	pointer-events: auto;
}
.activity .hotels li .detail .schedule dl.timetable dt{
width: 9rem;}

}