﻿/*
Theme Name: base
Description: Effectスタイルシート
*/


/* Efect */

/*　フェードイン */
.list-mv02{
  transition: 2.0s;
  opacity: 0;
}
.mv02{
  opacity: 1.0;
}

/* Effect -フェードイン＋上移動- */
.list-mv07 {
	opacity: 0;
	transform: translate(0,60px); 
	-webkit-transform: translate(0,60px);
}

.mv07 {
	opacity: 1.0;
	transform: translate(0,0); 
	-webkit-transform: translate(0,0);
}


.mv07 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
.mv07 figure:hover figcaption {
  opacity: 1;
}



/* Effect　-キャプション- */
.column::after {
  content: '';
  clear: both;
  display: block;
}
section {
	display: inline-block;
}
section:first-child h2 {
  margin-top: 0;
}
figure {
  float: left;
  width: 100%;
  margin: 0;
  padding: 0;
}
figure:first-child {
  margin-left: 0;
}
figure img {
  vertical-align: bottom;
}


.transform01 {
  -webkit-transform: scale(1);
  transform: scale(1);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
.transform02 {
  -webkit-transform: rotate(15deg) scale(1.4);
  transform: rotate(15deg) scale(1.4);
  -webkit-transition: all .3s ease-in-out;
  transition: all .3s ease-in-out;
}
figure:hover .transform01 {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}
figure:hover .transform02 {
  -webkit-transform: rotate(0) scale(1);
  transform: rotate(0) scale(1);
}
figure h3 {
  padding: 20px 0 5px;
  color: #fff;
  font-size: 24px;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 600;
}
figure p {
  color: #fff;
  text-align: center;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
}


/* Effect 10 -テキスト時間差表示- */
#example10 figure {
  position: relative;
  overflow: hidden;
}
#example10 figcaption {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.6);
  -webkit-transition: .3s;
  transition: .3s;
  opacity: 0;
}
#example10 figcaption h3,
#example10 figcaption p {
  position: absolute;
  left: -100%;
  width: 260px;
  padding: 0;
  text-align: left;
  -webkit-transition: .3s;
  transition: .3s;
}
#example10 figcaption h3 {
  top: 30px;
}
#example10 figcaption p {
  top: 75px;
  font-size: 12px;
}
#example10 figure:hover figcaption {
  opacity: 1;
}
#example10 figure:hover figcaption h3,
#example10 figure:hover figcaption p {
  left: 20px;
}
#example10 figure:hover figcaption h3 {
  -webkit-transition-delay: .2s;
  transition-delay: .2s;
}
#example10 figure:hover figcaption p {
  -webkit-transition-delay: .5s;
  transition-delay: .5s;
}





