@charset "utf-8";
/* CSS Document */
	
/*
//アニメーション設定*
*/
.slide-in {
  overflow: hidden;
    display: inline-block;
}

.slide-in_inner {
  display: inline-block;

}

/* 上下のアニメーション*/
.upAnime{
    opacity: 0;/* 事前に透過0 にして消しておく*/
}

.slideAnimeDownUp {
    animation-name:slideTextY100;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY100 {
    from {
        transform: translateY(100%);/* 要素を上の枠外に移動*/
        opacity: 0;
    }
    to {
        transform: translateY(0);/* 要素を元の位置に移動*/
        opacity: 1;
    }
}
.slideAnimeUpDown {
    animation-name:slideTextY-100;
    animation-duration:1s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slideTextY-100 {
    from {
    transform: translateY(-100%);/* 要素を下の枠外に移動*/
    opacity: 0;
    }
    to {
    transform: translateY(0);/* 要素を元の位置に移動*/
    opacity: 1;
    }
}

.randomBox,.randomScroll{
  display:flex;
  flex-wrap: wrap;
}

.t_biz .column{
  opacity: 0;
}

.fadeUp {
animation-name:fadeUpAnime;
animation-duration:0.5s;
animation-fill-mode:forwards;
opacity: 0;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
  transform: translateY(100px);
  }

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


/*写真と文章のセット　装飾のためのCSS*/

.area{
  position:relative;
  margin:0 auto 20% auto;
  padding: 0 30px;
  max-width:1000px;
  width:100%;
}
.area h3{
	font-size: 1.5rem;
	font-family: 'Zen Antique Soft', serif;
}
.area figure{
  position:relative;
  left:0;
  top:0;
  width:40%;
  line-height: 0;
}

.area:nth-child(2n) figure{
  left:50%;
}

.area .box{
  position:absolute;
  top:40%;
  left:30%;
  background:#fff;
  padding:30px;
  box-shadow: 0 0 40px rgba(0,0,0,0.1);
}

.area:nth-child(2n) .box{
  left:inherit;
  right:30%;
}


/*＝＝＝＝＝＝＝＝＝＝＝タブレット以下の見え方＝＝＝＝＝＝＝＝＝＝＝＝＝*/

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

.area{
  position:relative;
  margin:0 auto 20% auto;
  padding: 0;
}
.area figure{
  width:50%;
}

}

@media screen and (max-width:600px){
  
.area:nth-child(2n) figure {
    left: 0;
}
  
.area figure{
  width:100%;
}
.area .box,
.area:nth-child(2n) .box{
    position: relative;
    top: 0;
    left: 0;
  right: inherit;
  padding:20px;
}

}


.wave{
  position: relative;
}

.wave canvas{
    position: absolute;
    bottom: 0;
  left:0;
    width: 100%;
}

/* svg */
	.st0{fill:#D1C63F;}
	.st1{fill:none;stroke:#fff;stroke-width:16;stroke-linejoin:round;}

/*
//アニメーション設定end*
*/