@charset "utf-8";
* {
  box-sizing: border-box;
}



.element {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: opacity 1s, visibility 1s, transform 1s;
	z-index: -10000!important;
}
.element02 {
  /* 最初は非表示 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(50px);
  transition: opacity 1s, visibility 1s, transform 1s;
	z-index: -10000!important;
}


/* フェードイン時に入るクラス */
.is-fadein {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.youtube {
  width: 100%;
  aspect-ratio: 16 / 9;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}


@media screen and (min-width: 769px) {
	
	.scheduleWrap{ width: 100%; margin: auto; max-width: 1060px; margin-top: 40px;}
	.schedulePhoto{width: 100%; max-width: 250px; float: right;}
    .schedulePhoto ul{}
	.schedulePhoto li{ margin-bottom: 20px;}
	.schedulePhoto img{width: 100%; max-width: 250px;}
	.schedule{float: left; width: 790px; }
	.spphoto{display: none;}
	.schedule dl{ border-bottom: 1px dashed #888; padding-bottom: 20px; margin-bottom: 60px;}
	.schedule dt{ padding: 20px 30px; background: #0351b8 repeat; text-align: center; font-size: 18px; color: white;}
	.schedule dt img{width: 55px; margin-bottom: 5px!important;}
	.schedule dd h5{font-size: 18px; font-weight: bold;}
	.schedule dd{font-size: 14px; line-height: 2.1; padding-top: 5px; margin-left: 20px;width: 520px; }
	
	.topic{background: #f6f6f6 repeat; padding: 30px;}
	.topic h3{font-size: 20px; font-weight: bolder;}
	.topic p{font-size: 17px; line-height: 2.1;}
	.Photowrap{width: 100%; padding: 40px 0; clear: both; display: block;}
	.topbnrWrap{
	margin-top: -10px!important;
}
}



@media screen and (max-width: 768px){
	.spnone{display: none;}
	.scheduleWrap{ width: 100%; margin: auto; max-width: 640px; margin-top: 40px;}
	.schedule{width: 90%; margin: auto; }
	.spphoto{width: 100%; margin-bottom: 20px;}
	.spphoto img{width: 100%; max-width: 800px;}
	.schedule dl{ border-bottom: 1px dashed #888; padding-bottom: 30px; margin-bottom: 60px;}
	.schedule dt{ padding: 8px 40px; width: 100%; margin: auto; background: #0351b8 repeat; text-align: center; font-size: 14px; color: white;}
	.schedule dt img{width: 39px; margin-bottom: 5px!important;}
	.schedule dd h5{font-size: 18px; font-weight: bold;}
	.schedule dd{font-size: 15px; line-height: 2.1; padding-top: 5px; width: 100%; margin-top: 10px;}	
	
	.topic{background: #f6f6f6 repeat; padding: 30px;}
	.topic h3{font-size: 18px; font-weight: bolder;}
	.topic p{font-size: 14px; line-height: 2.1;}
	.Photowrap{width: 100%; padding: 30px 0; clear: both; display: block;}
	.topbnrWrap{
	margin-top: -10px!important;
}

	
}

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

}	



/* その場で */
.fadeIn{
animation-name:fadeInAnime;
animation-duration:1s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeInAnime{
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* 下から */

.fadeUp{
animation-name:fadeUpAnime;
animation-duration:1.2s;
animation-fill-mode:forwards;
opacity:0;
}

.fadeUp02{
animation-name:fadeUpAnime;
animation-duration:1.9s;
animation-fill-mode:forwards;
opacity:0;
}


@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 上から */

.fadeDown{
animation-name:fadeDownAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
  from {
    opacity: 0;
  transform: translateY(-100px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* 左から */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateX(-100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}

/* 右から */

.fadeRight{
animation-name:fadeRightAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateX(100px);
  }

  to {
    opacity: 1;
  transform: translateX(0);
  }
}



@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}