.hover-parent{width:25%;height:auto;position:relative;overflow:hidden;}
.hover-mask{width:100%;height:100%;position:absolute;top:0;bottom:0;left:0;right:0;background: rgba(246,232,238,0.8);opacity:0;color:#000;display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 30px;margin: 0 auto;}
.hover-mask{opacity:1;transition:all 0.3s ease;left: -200%;}
.hover-parent:hover .hover-mask{left: 0;}

/* 次へを促す
--------------------------- */
.next_b a {padding-top: 80px;}
.next_b a span {position: absolute;top: 0;left: 50%;width: 24px;height: 24px;margin-left: -12px;border-left: 1px solid #fff;border-bottom: 1px solid #fff;-webkit-transform: rotate(-45deg);transform: rotate(-45deg);-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite;opacity: 0;box-sizing: border-box;}
.next_b a span:nth-of-type(1) {-webkit-animation-delay: 0s;animation-delay: 0s;}
.next_b a span:nth-of-type(2) {top: 16px;-webkit-animation-delay: .15s; animation-delay: .15s;}
.next_b a span:nth-of-type(3) {top: 32px;-webkit-animation-delay: .3s;animation-delay: .3s;}
@-webkit-keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0;}}
@keyframes sdb {0% {opacity: 0;}50% {opacity: 1;}100% {opacity: 0x}}

/* パララックス背景
--------------------------- */
div.parallax{height:auto;width: 100%;background-position: 50% 50%;background-repeat: no-repeat;background-attachment: fixed;background-size: cover;	}
.content{padding:30px 0;}
.box{width: 100%;height: 800px;margin: 0 auto; text-align: center;display: table;}
.box2{width: 100%;height:560px;margin: 0 auto;text-align: center;display: table;}
.title_p {display: table-cell;vertical-align: middle;height:800px;max-width: 1200px;width: 100%;text-align: center;}
.title_p2 {display: table-cell;vertical-align: middle;height:560px;max-width: 1200px;width: 100%;text-align: center;}
.box h2{line-height: 500px;font-size: 70px;color: #fff;text-align: center;font-weight: bold;text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
.parallax_img_1{background:url(../img/top05.jpg);}
.parallax_img_2{background:url(../img/top07.jpg);}

@media screen and (max-width: 800px) {
div.parallax{
	height:auto;
	width:100%;
	background-size: contain;	
	min-height: auto; /* 高さの最小値を決めることで高さを確保させます。デバイスサイズに応じて数値を変更させると、背景画像もレスポンシブに変化します。　*/
　  background-position: center center;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
	background-attachment: local;
	}
.content{padding:30px 0;}
.box{max-width: 880px;height:auto;margin: 0 auto;	}
.title_p {display: table-cell;vertical-align: middle;text-align: center;text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);height:auto;width: 100%;}
.box h2{
	line-height: 500px;
	font-size: 70px;
	color: #fff;
	text-align: center;
	font-weight: bold;
	text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
	}
.parallax_img_1{background:url(../img/top05.jpg);background-repeat: no-repeat;}
.parallax_img_2{background:url(../img/top07.jpg);background-repeat: no-repeat;}
.hover-parent{width:50%;height:auto;position:relative;overflow:hidden;}

}

/* ボタンアニメ
--------------------------- */
/* Global Button Styles */
a.animated-button:link, a.animated-button:visited {
    position: relative;
    display: block;
    color: #D24D57;
    font-size:14px;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: .08em;
    border-radius: 0;
    -webkit-transition: all 1.3s ease;
    -moz-transition: all 1.3s ease;
    -o-transition: all 1.3s ease;
    transition: all 1.3s ease;
}
a.animated-button:link:after, a.animated-button:visited:after {
    content: "";
    position: absolute;
    height: 0%;
    left: 50%;
    top: 50%;
    width: 150%;
    z-index: -1;
    -webkit-transition: all 1.3s ease 0s;
    -moz-transition: all 1.3s ease 0s;
    -o-transition: all 1.3s ease 0s;
    transition: all 1.3s ease 0s;
}
a.animated-button:link:hover, a.animated-button:visited:hover {
    color: #FFF;
    text-shadow: none;
}
a.animated-button:link:hover:after, a.animated-button:visited:hover:after {
    height: 450%;
}
a.animated-button:link, a.animated-button:visited {
    position: relative;
    display: block;
    color: #fff;
    font-size:14px;
    border-radius: 0;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    overflow: hidden;
    letter-spacing: .08em;
    -webkit-transition: all 1.3s ease 0s;
    -moz-transition: all 1.3s ease 0s;
    -o-transition: all 1.3s ease 0s;
    transition: all 1.3s ease 0s;
}

/* Victoria Buttons */

a.animated-button.victoria-one {

}
a.animated-button.victoria-one:after {
    background: #7FC9C2;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.victoria-two {
    border: 2px solid #D24D57;
}
a.animated-button.victoria-two:after {
    background: #D24D57;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.victoria-three {
    border: 2px solid #D24D57;
}
a.animated-button.victoria-three:after {
    background: #D24D57;
    opacity: .5;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
a.animated-button.victoria-three:hover:after {
    height: 140%;
    opacity: 1;
}
a.animated-button.victoria-four {
    border: 2px solid #D24D57;
}
a.animated-button.victoria-four:after {
    background: #D24D57;
    opacity: .5;
    -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.victoria-four:hover:after {
    opacity: 1;
    height: 600% !important;
}
/* Sandy Buttons */

a.animated-button.sandy-one {
    border: 2px solid #AEA8D3;
    color: #FFF;
}
a.animated-button.sandy-one:after {
    border: 3px solid #AEA8D3;
    opacity: 0;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    
}
a.animated-button.sandy-one:hover:after {
    height: 120% !important;
    opacity: 1;
    color: #FFF;
}
a.animated-button.sandy-two {
    border: 2px solid #AEA8D3;
    color: #FFF;
}
a.animated-button.sandy-two:after {
    border: 3px solid #AEA8D3;
    opacity: 0;
    -moz-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(90deg);
    transform: translateY(-50%) translateX(-50%) rotate(90deg);
}
a.animated-button.sandy-two:hover:after {
    height: 600% !important;
    opacity: 1;
    color: #FFF;
}
a.animated-button.sandy-three {
    border: 2px solid #003990;
    color: #FFF;
}
a.animated-button.sandy-three:after {
    border: 3px solid #003990;
    opacity: 0;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.sandy-three:hover:after {
    height: 400% !important;
    opacity: 1;
    color: #FFF;
}
a.animated-button.sandy-four {
    border: 2px solid #AEA8D3;
    color: #FFF;
}
a.animated-button.sandy-four:after {
    border: 3px solid #AEA8D3;
    opacity: 0;
    -moz-transform: translateY(-50%) translateX(-50%) rotate(25deg);
    -ms-transform: translateY(-50%) translateX(-50%) rotate(25deg);
    -webkit-transform: translateY(-50%) translateX(-50%) rotate(25deg);
    transform: translateY(-50%) translateX(-50%) rotate(25deg);
}
a.animated-button.sandy-four:hover:after {
    height: 400% !important;
    opacity: 1;
    color: #FFF;
}

/* Gibson Buttons */

a.animated-button.gibson-one {
    border: 2px solid #65b37a;
    color: #FFF;
}
a.animated-button.gibson-one:after {
    opacity: 0;
    background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
    background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
    background-size: 10px 10px;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(25deg);
    transform: translateX(-50%) translateY(-50%) rotate(25deg);
}
a.animated-button.gibson-one:hover:after {
    height: 600% !important;
    opacity: 1;
    color: #FFF;
}
a.animated-button.gibson-two {
    border: 2px solid #65b37a;
    color: #FFF;
}
a.animated-button.gibson-two:after {
    opacity: 0;
    background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
    background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
    background-size: 10px 10px;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(-25deg);
    transform: translateX(-50%) translateY(-50%) rotate(-25deg);
}
a.animated-button.gibson-two:hover:after {
    height: 600% !important;
    opacity: 1;
    color: #FFF;
}
a.animated-button.gibson-three {
    border: 2px solid #65b37a;
    color: #FFF;
}
a.animated-button.gibson-three:after {
    opacity: 0;
    background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
    background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
    background-size: 10px 10px;
    -moz-transform: translateX(-50%) translateY(-50%) rotate(90deg);
    -ms-transform: translateX(-50%) translateY(-50%) rotate(90deg);
    -webkit-transform: translateX(-50%) translateY(-50%) rotate(90deg);
    transform: translateX(-50%) translateY(-50%) rotate(90deg);
}
a.animated-button.gibson-three:hover:after {
    height: 600% !important;
    opacity: 1;
    color: #FFF;
}
a.animated-button.gibson-four {
    border: 2px solid #65b37a;
    color: #FFF;
}
a.animated-button.gibson-four:after {
    opacity: 0;
    background-image: -webkit-linear-gradient( transparent 50%, rgba(101,179,122,0.2) 50%);
    background-image: -moz-linear-gradient(transparent 50%, rgba(101,179,122,0.2) 50%);
    background-size: 10px 10px;
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%));
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
a.animated-button.gibson-four:hover:after {
    height: 600% !important;
    opacity: 1;
    color: #FFF;
}
/* Thar Buttons */

a.animated-button.thar-one {
    color: #fff;
    cursor: pointer;
    display: block;
    position: relative;
    border: 2px solid #F7CA18;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-one:hover {
    color: #000 !important;
    background-color: transparent;
    text-shadow: none;
}
a.animated-button.thar-one:hover:before {
    bottom: 0%;
    top: auto;
    height: 100%;
}
a.animated-button.thar-one:before {
    display: block;
    position: absolute;
    left: 0px;
    top: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: #000 !important;
    background: #F7CA18;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two {
    color: #da2629;
    cursor: pointer;
    display: block;
    position: relative;
    border: 2px solid #da2629;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-two:hover {
    color: #fff !important;
    background-color: transparent;
    text-shadow: ntwo;
}
a.animated-button.thar-two:hover:before {
    top: 0%;
    bottom: auto;
    height: 100%;
}
a.animated-button.thar-two:before {
    display: block;
    position: absolute;
    left: 0px;
    bottom: 0px;
    height: 0px;
    width: 100%;
    z-index: -1;
    content: '';
    color: #000 !important;
    background: #da2629;
    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
}
a.animated-button.thar-three {
    color: #7a205e;
    border: 1px solid #7a205e;
    cursor: pointer;
    display: block;
    position: relative;
    background: rgba(122,32,94,0);
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-three:hover {
    color: #fff !important;
    background-color: transparent;
    text-shadow: nthree;
}
a.animated-button.thar-three:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}
a.animated-button.thar-three:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #fff !important;
    background: rgba(122,32,94,1.0);
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-three2 {
    color: #ffffff;
    cursor: pointer;
    display: block;
    position: relative;
   background: rgba(214,128,160,0);
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-three2:hover {
    color: #000 !important;
    background-color: transparent;
    text-shadow: nthree;
}
a.animated-button.thar-three2:hover:before {
    left: 0%;
    right: auto;
    width: 100%;
}
a.animated-button.thar-three2:before {
    display: block;
    position: absolute;
    top: 0px;
    right: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #000000 !important;
    background: rgba(214,128,160,1);
    transition: all 0.3s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-four {
    color: #fff;
    cursor: pointer;
    display: block;
    position: relative;
    border: 2px solid #F7CA18;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}
a.animated-button.thar-four:hover {
    color: #000 !important;
    background-color: transparent;
    text-shadow: nfour;
}
a.animated-button.thar-four:hover:before {
    right: 0%;
    left: auto;
    width: 100%;
}
a.animated-button.thar-four:before {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    height: 100%;
    width: 0px;
    z-index: -1;
    content: '';
    color: #000 !important;
    background: #F7CA18;
    transition: all 0.4s cubic-bezier(0.42, 0, 0.58, 1);
0s;
}

/* ブロックがスライド
--------------------------- */
/* revealContentを最初は消しておく */
.revealContent {
    opacity: 0;
}

/* revealActiveクラスが追加されて.3s後に表示する */
.revealActive .revealContent {
    -webkit-transition-delay: .3s;
         -o-transition-delay: .3s;
            transition-delay: .3s;
    opacity: 1;
}

.revealItem, .revealItem2 {
    display: block;
    position: relative;
    overflow: hidden;
}


/* before擬似要素の黒いblockにanimationをつけておく */
.revealItem.revealActive::before, .revealItem2.revealActive::before {
    -webkit-animation: hideFromLeft .3s forwards, showFromLeft .3s forwards .3s;
            animation: hideFromLeft .3s forwards, showFromLeft .3s forwards .3s;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #13ae67;
    margin: 1px;
}


/* before擬似要素を左から右にスライドイン */
@-webkit-keyframes hideFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes hideFromLeft {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}

/* before擬似要素を左から右にスライドアウト */
@-webkit-keyframes showFromLeft {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
}

@keyframes showFromLeft {
    0% {
        -webkit-transform: translateX(0%);
                transform: translateX(0%);
    }
    100% {
        -webkit-transform: translateX(100%);
                transform: translateX(100%);
    }
}

/* 画像を使うときはvertical-align bottomをしないと下に余白ができてしまうので注意！！ */
.revealImg {
    -o-object-fit: cover;
       object-fit: cover;
    vertical-align: bottom;
}
/* メールフォーム
--------------------------- */
.wpcf7 {
	margin: 96px 0;
}
.asterisk {
	margin: 0 0 0 0.2em;
	color: #f5637a;
}
span.wpcf7-list-item {display: block;}
.wpcf7 span.wpcf7-not-valid-tip {
	font-size: 80%;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 textarea {
	background-color: #fff;
	color: #333;
	width: 95%;
	border: 1px solid #ddd;
	font-size: 100%;
	padding: 0.5em;
	border-radius: 4px;
	box-shadow: 1px 1px 3px rgba(0,0,0,.1) inset;
}
.wpcf7 input[type="submit"] {
	font-size: 100%;
	padding: 0.2em 0.4em;
	background: #eee;
	color: #333;
	border-radius: 4px;
	cursor: pointer;
	box-shadow: 0 0 1px rgba(0,0,0,.2);
	border: 1px solid #ccc;
	text-shadow: -1px 1px 0 rgba(255,255,255,1);
}
.wpcf7 input[type="submit"]:hover {
	box-shadow: 0 0 1px rgba(0,0,0,.2) inset;
}