@charset "UTF-8";




.sec {
    margin: 60px 0px;
    max-width: 100%;
}


.col2 {
    max-width: 100%;
}


.img-container {
    overflow: hidden;
    position: relative;
}

.img-container__img {
    display: block;
    opacity: 0;
    position: relative;
    transition:all .5s .3s ease; 
    z-index: 0;
}

.img-container:before {
    background: #fff;
    content: '';
    display: block;
    height: 100%;
    position: absolute;
    transform: translateX(-100%);
    transition:all .8s 0s ease; 
    width: 100%;
    z-index: 1;     
	border-radius: 7px 7px 7px 7px; /* CSS */
	-webkit-border-radius: 7px 7px 7px 7px;  /* Safari,Google Chrome */  
	-moz-border-radius: 7px 7px 7px 7px;  /* Firefox */
	behavior: url(../js/PIE.htc);
}

.text-container {
    opacity: 0;
    padding:0 2.5%;
    transition: all .8s .5s ease;
}

.text-container__title {
    color: #ff0;
	font-family: "Sawarabi Mincho";
    font-size: 28px;
    font-weight: 700;
    text-align: center;
	text-shadow: #000 2px 2px 3px;
}

.text-container p {
	color: #fff;
	font-family: "Sawarabi Mincho";
	font-size: 16px;
	text-shadow: #000 2px 2px 3px;
}

.text-container a {
	display: block;
	margin: 20px auto;
	padding: 0px 10px;
	width: 120px;
	height: 40px;
	color: #fff;
	font-family: "Sawarabi Mincho";
	line-height: 40px;
	text-align: center;
	text-shadow: #000 2px 2px 3px;
	border: 2px solid #fff;
	border-radius: 7px 7px 7px 7px; /* CSS */
	-webkit-border-radius: 7px 7px 7px 7px;  /* Safari,Google Chrome */  
	-moz-border-radius: 7px 7px 7px 7px;  /* Firefox */
	behavior: url(../js/PIE.htc);
}

.text-container a:hover {
	color: #ff0;
	border: 2px solid #ff0;
}


/*アニメーションするプロパティを設定します*/
.img-container.active img {
    opacity: 1;
	border-radius: 7px 7px 7px 7px; /* CSS */
	-webkit-border-radius: 7px 7px 7px 7px;  /* Safari,Google Chrome */  
	-moz-border-radius: 7px 7px 7px 7px;  /* Firefox */
	behavior: url(../js/PIE.htc);
}

.img-container.active:before {
    transform: translateX(100%);
}

.text-container.active {
    opacity: 1;
}


.fadein {
  opacity: 0;
  transform : translate(0, 50px);
  transition : all 1500ms;
}

.fadein.scrollin{
  opacity: 1;
  transform: translate(0, 0);
  transition : all 1500ms;
}


/*下からフェードイン*/
.fade-in-bottom {
   opacity: 0;
   animation-name: fadein-bottom;
   animation-duration: 3.0s;
   animation-timing-function: ease-out;
   animation-fill-mode: forwards;
}
@keyframes fadein-bottom {
   0% {
      opacity: 0;
      transform: translateY(20px);
   }
   100% {
      opacity: 1;
      transform: translateY(0);
   }
}


#particles-js{ 
  position:fixed;/*描画固定*/
  z-index:-1;/*描画を一番下に*/
  width: 100%;
  height: 100%;
  background-color:#f3f3f3;/*背景色*/
}


@media screen and (min-width:800px){
/*最小幅800px以上の指定*/



.flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.flex.rev {
    flex-flow: row-reverse;
}


.col2 {
    max-width:47%;
}


.text-container__title {
    font-size: 30px;
    text-align: left;
}



}