/* 共通 */
figure {
    position: relative;
    overflow: hidden;
    margin: 0;
    min-width: 230px;
    max-width: 1000px;
    /*max-height: 300px;*/
    width: 100%;
    text-align:center;
}

/* 画像効果なし */
figure.no_effect{    
}
figure.no_effect div{    
	position:absolute;
	bottom:0;
	left:0;
	background-color:rgba(0, 0, 0, 0.55);
	width:100%;
}
figure.no_effect div p{    
	color:#ffffff;
	padding:10px;
	word-break:break-all;
	font-size:160%;
	line-height:1.2;
	text-align:center;
	font-weight:bold;
}
figure.no_effect img {
    max-width: 100%;
}

/* アニメーション：ラインクロス */
figure.lineCross {
    color: #ffffff;
    background-color: #000000;
}
figure.lineCross *{
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
figure.lineCross *:before,
figure.lineCross *:after {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.55s ease;
    transition: all 0.55s ease;
}
figure.lineCross img {
    max-width: 100%;
    backface-visibility: hidden;
    vertical-align: top;
}
figure.lineCross figcaption {
    position: absolute;
    bottom: 25px;
    right: 25px;
    margin-left:25px;
    padding: 10px 10px 10px;
}
figure.lineCross figcaption:before,
figure.lineCross figcaption:after {
    height: 2px;
    width: 1440px;
    position: absolute;
    content: '';
    background-color: #ffffff;
}
figure.lineCross figcaption:before {
    top: 0;
    left: 0;
    -webkit-transform: translateX(130%);
    transform: translateX(130%);
}
figure.lineCross figcaption:after {
    bottom: 0;
    right: 0;
    -webkit-transform: translateX(-130%);
    transform: translateX(-130%);
}
figure.lineCross figcaption div:before,
figure.lineCross figcaption div:after {
    width: 2px;
    height: 2000%;
    position: absolute;
    content: '';
    background-color: #ffffff;
}
figure.lineCross figcaption div:before {
    top: 0;
    left: 0;
    -webkit-transform: translateY(130%);
    transform: translateY(130%);
}
figure.lineCross figcaption div:after {
    bottom: 0;
    right: 0;
    -webkit-transform: translateY(-300%);
    transform: translateY(-300%);
}
figure.lineCross figcaption div {
	background-color:rgba(0, 0, 0, 0.55);
	width:100%;
}
figure.lineCross p{
    margin: 0;
    text-align: center;
	color:#ffffff;
	padding:10px;
	word-break:break-all;
	font-size:160%;
	line-height:1.2;
	text-align:center;
	font-weight:bold;
}
figure.lineCross a {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
figure.lineCross:hover img,
figure.lineCross.hover img {
    zoom: 1;
    filter: alpha(opacity=50);
    -webkit-opacity: 0.5;
    opacity: 0.5;
}
figure.lineCross:hover figcaption:before,
figure.lineCross.hover figcaption:before,
figure.lineCross:hover figcaption:after,
figure.lineCross.hover figcaption:after,
figure.lineCross:hover figcaption div:before,
figure.lineCross.hover figcaption div:before,
figure.lineCross:hover figcaption div:after,
figure.lineCross.hover figcaption div:after {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
}
figure.lineCross:hover figcaption:before,
figure.lineCross.hover figcaption:before,
figure.lineCross:hover figcaption:after,
figure.lineCross.hover figcaption:after {
    -webkit-transition-delay: 0.15s;
    transition-delay: 0.15s;
}


/* アニメーション：斜め */
figure.slash {
    color: #000000;
    text-align: center;
}
figure.slash * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
figure.slash img {
    opacity: 1;
    max-width: 100%;
}
figure.slash:after,
figure.slash:before {
    background: #ffffff;
    width: 200%;
    height: 200%;
    position: absolute;
    content: '';
    opacity: 0.5;
    -webkit-transition: all 0.55s ease-in-out;
    transition: all 0.55s ease-in-out;
    z-index: 1;
}
figure.slash:after {
    top: 0;
    left: 0;
    -webkit-transform: skew(-45deg) translateX(-150%);
    transform: skew(-45deg) translateX(-150%);
}
figure.slash:before {
    right: 0;
    bottom: 0;
    -webkit-transform: skew(-45deg) translateX(150%);
    transform: skew(-45deg) translateX(150%);
}
figure.slash figcaption {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    z-index: 2;
}
figure.slash p {
    margin: 0;
    width: 100%;
	word-break:break-all;
    opacity: 0;
    padding: 0 30px;
    font-size: 160%;
    font-weight: bold;
}
figure.slash a {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 2;
}
figure.slash:hover:after,
figure.slash.hover:after {
    -webkit-transform: skew(-45deg) translateX(-50%);
    transform: skew(-45deg) translateX(-50%);
}
figure.slash:hover:before,
figure.slash.hover:before {
    -webkit-transform: skew(-45deg) translateX(50%);
    transform: skew(-45deg) translateX(50%);
}
figure.slash:hover figcaption p,
figure.slash.hover figcaption p {
    -webkit-transition-delay: 0.2s;
    transition-delay: 0.2s;
}
figure.slash:hover figcaption p,
figure.slash.hover figcaption p {
    opacity: 0.7;
}

/* アニメーション：ポップ */
figure.pop {
    color: #000000;
    /*background-image: -webkit-linear-gradient(top, #ffffff 0%, #000000 70%);
    background-image: linear-gradient(to bottom, #ffffff 0%, #000000 70%);*/
}

figure.pop * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

figure.pop * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.35s ease;
    transition: all 0.35s ease;
}

figure.pop img {
    max-width: 100%;
}

figure.pop figcaption {
    position: absolute;
    bottom: 0%;
    left: 0;
    width: 100%;
    z-index: 1;
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

figure.pop p {
    color: #ffffff;
    margin: 0;
    width: 100%;
    padding: 10px 20px;
	word-break:break-all;
    /*background: rgba(128, 128, 128, 0.9);*/
	background-color:rgba(0, 0, 0, 0.55);
    text-align: center;
    bottom: 0;
    font-size: 160%;
    font-weight: bold;
}

figure.pop a {
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    z-index: 1;
}

figure.pop:hover img,
figure.pop.hover img {
    opacity: 0.4;
}

figure.pop:hover figcaption,
figure.pop.hover figcaption {
    -webkit-transform: translateY(0);
    transform: translateY(0);
}

/* 各アニメーションに対するヘッダ画像キャプション背景色 */
/* 画像効果なし */
.caption_color_green figure.no_effect div{    
	background-color: rgba(60, 100, 5, 0.65);
}
.caption_color_blue figure.no_effect div {
	background-color: rgba(50, 90, 150, 0.65);
}
.caption_color_red figure.no_effect div {
	background-color: rgba(145, 20, 20, 0.65);
}
.caption_color_brown figure.no_effect div {
	background-color: rgba(110, 70, 80, 0.65);
}
.caption_color_royalblue figure.no_effect div {
	background-color: rgba(30, 30, 120, 0.65);
}
.caption_color_gold figure.no_effect div {
	background-color: rgba(230, 190, 145, 0.65);
}
.caption_color_gold figure.no_effect figcaption p{
	text-shadow: 1px 1px 0 rgba(0,0,0,.2),2px 2px 0 rgba(0,0,0,.2),2px 2px 0 rgba(0,0,0,.2);
}

/* アニメーション：ラインクロス */
.caption_color_green figure.lineCross figcaption div {
	background-color: rgba(60, 100, 5, 0.65);
}
.caption_color_blue figure.lineCross figcaption div {
	background-color: rgba(50, 90, 150, 0.65);
}
.caption_color_red figure.lineCross figcaption div {
	background-color: rgba(145, 20, 20, 0.65);
}
.caption_color_brown figure.lineCross figcaption div {
	background-color: rgba(110, 70, 80, 0.65);
}
.caption_color_royalblue figure.lineCross figcaption div {
	background-color: rgba(30, 30, 120, 0.65);
}
.caption_color_gold figure.lineCross figcaption div {
	background-color: rgba(230, 190, 145, 0.65);
}
.caption_color_gold figure.lineCross figcaption p{
	text-shadow: 1px 1px 0 rgba(0,0,0,.2),2px 2px 0 rgba(0,0,0,.2),2px 2px 0 rgba(0,0,0,.2);
}


/* アニメーション：スラッシュ */
/*
.caption_color_green figure.slash:after {
	background-color: rgba(60, 100, 5, 0.65);
}
.caption_color_blue figure.slash:after {
	background-color: rgba(50, 90, 150, 0.65);
}
.caption_color_red figure.slash:after {
	background-color: rgba(145, 20, 20, 0.65);
}
.caption_color_brown figure.slash:after {
	background-color: rgba(110, 70, 80, 0.85);
}
.caption_color_royalblue figure.slash:after {
	background-color: rgba(30, 30, 120, 0.65);
}
.caption_color_gold figure.slash:after {
	background-color: rgba(230, 190, 145, 0.85);
}
*/

/* アニメーション：ポップ */
.caption_color_green figure.pop p{
	background-color: rgba(60, 100, 5, 0.65);
}
.caption_color_blue figure.pop p {
	background-color: rgba(50, 90, 150, 0.65);
}
.caption_color_red figure.pop p {
	background-color: rgba(145, 20, 20, 0.65);
}
.caption_color_brown figure.pop p {
	background-color: rgba(110, 70, 80, 0.65);
}
.caption_color_royalblue figure.pop p {
	background-color: rgba(30, 30, 120, 0.65);
}
.caption_color_gold figure.pop p {
	background-color: rgba(230, 190, 145, 0.65);
}
.caption_color_gold figure.pop {
	text-shadow: 1px 1px 0 rgba(0,0,0,.2),2px 2px 0 rgba(0,0,0,.2),2px 2px 0 rgba(0,0,0,.2);
}
.caption_color_green figure.pop:hover img,
.caption_color_blue figure.pop:hover img,
.caption_color_red figure.pop:hover img,
.caption_color_brown figure.pop:hover img,
.caption_color_royalblue figure.pop:hover img,
.caption_color_gold figure.pop:hover img {
    opacity: 0.8;
}

/* スマートデバイス */
@media screen and (max-width: 992px) {

    figure figcaption {
        font-size:50%;
    }

    figure.no_effect div p{  
	    padding:2%;
    }
    
    figure.lineCross figcaption {
        position: absolute;
        bottom: 10%;
        right: 5%;
        margin-left:5%;
        padding: 2%;
    }
    
    figure.slash p {
        padding: 2% 5%;
    }
    
    figure.pop p {
        padding: 2% 2%;
    }

}