body{
	
}

.mt-30{
	margin-top: 30px;
}

.mt-50{
	margin-top: 50px;
}
.mt-100{
	margin-top: 100px;
}

.t_ttl{
	display: inline-block;
	font-family: "Times New Roman", Times, "serif";
	font-size:3em;
	border-bottom: solid 1px;
	margin-bottom: 15px;
}

.FlexContainer {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    align-content: flex-start;
    overflow: auto;
    flex-direction: row;
}

.FlexContainer div {
    width: 500px;
    margin: 15px;
	text-align: center;
}

.youtube {
	width:70%; /* 横幅変更 */
	padding-top:2%;
	box-sizing: border-box;
	margin: 0 auto;
}

.youtube .inner {
	padding-top: 60%;
	position: relative;
	height: 0;
	overflow:hidden;
}

.youtube .inner iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.c01{
	position: relative; color: transparent;
	text-align: center;
	font-size:7em;
	font-family: "Times New Roman", Times, "serif";
	color: #fff;
	width: 60%;
	margin: 0 auto;
}
	
.c01::before{
    content: ""; position: absolute; z-index: 1; top: 0%; right: 100%; bottom: 0%; left: 0%;
    background : #000;
	
  }
.c01.active{
    animation-name: kf_c01a;
    animation-duration: 0s;
    animation-delay: 0.5s;
	animation-fill-mode: forwards;}


.c01::before{
      animation-name: kf_c01b;
      animation-duration: 1s;
      animation-fill-mode: forwards;
    }


@keyframes kf_c01a {
  100%{
    color: inherit;
  }
}
@keyframes kf_c01b {
  50%{
    left: 0%; right: 0%;
  }
  100%{
    left: 100%; right: 0%;
  }
}

/*フェードイン*/
.fadeIn {
animation: fadeIn 0.7s ease 0s 1 normal;
text-align: center;
margin: 0 auto;
}

/* fadeIn */
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media (max-width: 600px) {

	.c01{
		font-size: 4em;
	}
	
	.t_ttl{
		font-size: 2em;
}