/* CSS Document */

.fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
figure.snip1340 {
  font-family: 'メイリオ','Meiryo','Arial','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック','sans-serif';  
  position: relative;
  float: left;
  overflow: hidden;
  margin: 10px 0%;
  min-width: 100px;
  max-width: 2000px;
  max-height: 900px;
  width: 100%;
  color: #000000;
  text-align: center;
  -webkit-font-smoothing: antialiased; /*なめらか*/
}
figure.snip1340 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1340 img {
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
  width: 100%;
  -webkit-transition: opacity 0.35s;
  transition: opacity 0.35s;
}
figure.snip1340:after {
  background: #ffffff;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  content: '';
  opacity: 0.75; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

/*ここに元々はh2とpの指定あり-ブレイクポイントにあわせるため下で調整*/
figure.snip1340 a {
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  position: absolute;
  z-index: 1;
}
figure.snip1340:hover img,
figure.snip1340.hover img {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
}
figure.snip1340:hover:after,
figure.snip1340.hover:after {
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}


@media screen and (max-width: 544px) {
figure.snip1340 h2,
figure.snip1340 p {
  margin: 0;
  color:#fff;
  text-shadow:  1px  1px 4px #333 ,
               -1px  1px 4px #333 ,
                1px -1px 4px #333 ,
               -1px -1px 4px #333; /*横に px・縦に px・ぼかし px・影の色# */
  width: 100%;

}
figure.snip1340 h2 {
  padding: 0 20px;
  font-weight: 500;
  font-size: 16px;
  /*text-transform: uppercase;*//*大文字に変換*/
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340 p {
  padding: 0 0px;
  font-size: 12px;
  margin-top:2px;
  line-height:140%;
  opacity: 0; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
  /*font-weight: 500;*/
}

h2.heading-section {
  padding: 0 20px;
  font-weight: 500;
  font-size: 20px;
  /*text-transform: uppercase;*//*大文字に変換*/
}
h2.heading-section:before {
  position: absolute;
  content: '';
  top: 0;
  width: 40px;
  height: 3px;
  background: #79c34f;
}

figure.snip1340 figcaption {
  position: absolute;
  top: 90%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover  figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2,
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2 {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}


}

@media screen  and (min-width:545px) and ( max-width:768px){
figure.snip1340 h2,
figure.snip1340 p {
  margin: 0;
  color:#fff;
  text-shadow:  1px  1px 4px #333 ,
               -1px  1px 4px #333 ,
                1px -1px 4px #333 ,
               -1px -1px 4px #333; /*横に px・縦に px・ぼかし px・影の色# */
  width: 100%;

}
figure.snip1340 h2 {
  padding: 0 30px;
  font-weight: 500;
  font-size: 22px;
  /*text-transform: uppercase;*//*大文字に変換*/
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340 p {
  padding: 0 0px;
  font-size:14px;
  margin-top:2px;
  line-height:140%;
  opacity: 0; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
  /*font-weight: 500;*/
}

h2.heading-section {
  padding: 0 30px;
  font-weight: 500;
  font-size: 30px;
  /*text-transform: uppercase;*//*大文字に変換*/
}
h2.heading-section:before {
  position: absolute;
  content: '';
  top: 0;
  width: 40px;
  height: 3px;
  background: #79c34f;
}

figure.snip1340 figcaption {
  position: absolute;
  top: 90%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover  figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2,
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2 {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}

}

@media screen  and (min-width:769px) and ( max-width:992px){
figure.snip1340 h2,
figure.snip1340 p {
  margin: 0;
  color:#fff;
  text-shadow:  1px  1px 4px #333 ,
               -1px  1px 4px #333 ,
                1px -1px 4px #333 ,
               -1px -1px 4px #333; /*横に px・縦に px・ぼかし px・影の色# */
  width: 100%;

}
figure.snip1340 h2 {
  padding: 0 30px;
  font-weight: 530;
  font-size: 22px;
  /*text-transform: uppercase;*//*大文字に変換*/
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340 p {
  padding: 0 0px;
  font-size: 12px;
  margin-top:2px;
  line-height:140%;
  opacity: 0; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
  /*font-weight: 500;*/
}

h2.heading-section {
  padding: 0 30px;
  font-weight: 550;
  font-size: 20px;
  /*text-transform: uppercase;*//*大文字に変換*/
}
h2.heading-section:before {
  position: absolute;
  content: '';
  top: 0;
  width: 30px;
  height: 3px;
  background: #79c34f;
}

figure.snip1340 figcaption {
  position: absolute;
  top: 90%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover  figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2,
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2 {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}

}

@media screen  and (min-width:993px) and ( max-width:1199px){
figure.snip1340 h2,
figure.snip1340 p {
  margin: 0;
  color:#fff;
  text-shadow:  1px  1px 4px #333 ,
               -1px  1px 4px #333 ,
                1px -1px 4px #333 ,
               -1px -1px 4px #333; /*横に px・縦に px・ぼかし px・影の色# */
  width: 100%;

}
figure.snip1340 h2 {
  padding: 0 30px;
  font-weight: 500;
  font-size: 20px;
  /*text-transform: uppercase;*//*大文字に変換*/
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340 p {
  padding: 0 0px;
  font-size: 14px;
  margin-top:2px;
  line-height:140%;
  opacity: 0; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
  /*font-weight: 500;*/
}

h2.heading-section {
  padding: 0 30px;
  font-weight: 500;
  font-size: 28px;
  /*text-transform: uppercase;*//*大文字に変換*/
}
h2.heading-section:before {
  position: absolute;
  content: '';
  top: 0;
  width: 40px;
  height: 3px;
  background: #79c34f;
}

figure.snip1340 figcaption {
  position: absolute;
  top: 90%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover  figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2,
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2 {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}

}

@media screen  and (min-width:1200px){
figure.snip1340 h2,
figure.snip1340 p {
  margin: 0;
  color:#fff;
  text-shadow:  1px  1px 4px #333 ,
               -1px  1px 4px #333 ,
                1px -1px 4px #333 ,
               -1px -1px 4px #333; /*横に px・縦に px・ぼかし px・影の色# */
  width: 100%;

}
figure.snip1340 h2 {
  padding: 0 30px;
  font-weight: 500;
  font-size: 20px;
  /*text-transform: uppercase;*//*大文字に変換*/
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340 p {
  padding: 0 0px;
  font-size: 14px;
  margin-top:2px;
  line-height:150%;
  font-weight: 400;
  opacity: 0; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}

h2.heading-section {
  padding: 0 30px;
  font-weight: 500;
  font-size: 30px;
  /*text-transform: uppercase;*//*大文字に変換*/
}

h2.heading-section:before {
  position: absolute;
  content: '';
  top: 0;
  width: 40px;
  height: 3px;
  background: #79c34f;
}

figure.snip1340 figcaption {
  position: absolute;
  top: 90%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover  figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
  z-index: 1;
}

figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2,
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
figure.snip1340:hover figcaption h2,
figure.snip1340.hover figcaption h2 {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}
figure.snip1340:hover figcaption p,
figure.snip1340.hover figcaption p {
  color:#000000;
  text-shadow:  2px  2px 4px #fff ,
               -2px  2px 4px #fff ,
                2px -2px 4px #fff ,
               -2px -2px 4px #fff; /*横に px・縦に px・ぼかし px・影の色# */
  opacity: 1; /* 可視化・1で可視 0で不可視 0.00で透明度指定 */
}

}
/* 
/* Demo purposes only */