@charset "utf-8";

/* それぞれ変化前と変化後 */

.zoom-in{
opacity: 0;
transform: scale(2, 2);
transition: .8s;
transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1);
}
.zoomIn{
opacity: 1;
transform: scale(1, 1);
}

.zoom-in-inner:before,
.zoom-in-inner:after{
opacity: 0;
transform: scale(2, 2);
transition: .8s;
}
.zoomInInner:before,
.zoomInInner:after{
opacity: 1;
transform: scale(1, 1);
}


.zoom-in-light{
opacity: 0;
transform: scale(1.15, 1.15);
transition: .8s;
}
.zoomInLight{
opacity: 1;
transform: scale(1, 1);
}

.zoom-in-light-inner:before,
.zoomInLight-inner:after{
opacity: 0;
transform: scale(1.15, 1.15);
transition: .8s;
}
.zoomInLightInner:before,
.zoomInLightInner:after{
opacity: 1;
transform: scale(1, 1);
}


.zoom-up{
opacity: 0;
transform: scale(.1, .1);
transition: .8s;
}
.zoomUp{
opacity: 1;
transform: scale(1, 1);
}

.zoom-up-inner:before,
.zoom-up-inner:after{
opacity: 0;
transform: scale(.1, .1);
transition: .8s;
}
.zoomUpInner:before,
.zoomUpInner:after{
opacity: 1;
transform: scale(1, 1);
}


.zoom-up-light{
opacity: 0;
transform: scale(.8, .8);
transition: .8s;
}
.zoomUpLight{
opacity: 1;
transform: scale(1, 1);
}

.zoom-up-light-inner:before,
.zoom-up-light-inner:after{
opacity: 0;
transform: scale(.8, .8);
transition: .8s;
}
.zoomUpLightInner:before,
.zoomUpLightInner:after{
opacity: 1;
transform: scale(1, 1);
}


.slide-in-left{
opacity: 0;
transform: translate(100px, 0);
transition: .4s;
}
.slideInLeft{
opacity: 1;
transform: translate(0, 0);
}

.slide-in-left-inner:before,
.slide-in-left-inner:after{
opacity: 0;
transform: translate(-100%, 0);
transition: .8s;
}
.slideInLeftInner:before,
.slideInLeftInner:after{
opacity: 1;
transform: translate(0, 0);
}

.slide-in-left-blur{
opacity: 0;
transform: translate(100px, 0);
transition: .8s;
filter:blur(10px);
}
.slideInLeftBlur{
opacity: 1;
transform: translate(0, 0);
filter:blur(0);
}



.slide-out-left{
opacity: 1;
transform: translate(0, 0);
transition: .8s;
}
.slideOutLeft{
opacity: 0;
transform: translate(-100%, 0);
}

.slide-out-left-inner:before,
.slide-out-left-inner:after{
transform: translate(0, 0);
transition: .8s;
}
.slideOutLeftInner:before,
.slideOutLeftInner:after{
transform: translate(-110%, 0);
}

.slide-out-right-inner:before,
.slide-out-right-inner:after{
transform: translate(0, 0);
transition: .8s;
}
.slideOutRightInner:before,
.slideOutRightInner:after{
transform: translate(110%, 0);
}


.slide-in-right{
opacity: 0;
transform: translate(-100%, 0);
transition: .8s;
}
.slideInRight{
opacity: 1;
transform: translate(0, 0);
}

.slide-in-right-inner:before,
.slide-in-right-inner:after{
opacity: 0;
transform: translate(100%, 0);
transition: .8s;
}
.slideInRightInner:before,
.slideInRightInner:after{
opacity: 1;
transform: translate(0, 0);
}


.slide-in-top{
opacity: 0;
transform: translate(0, 100%);
transition: .8s;
}
.slideInTop{
opacity: 1;
transform: translate(0, 0);
}

.slide-in-top-inner:before,
.slide-in-top-inner:after{
opacity: 0;
transform: translate(0, 100%);
transition: .8s;
}
.slideInTopInner:before,
.slideInTopInner:after{
opacity: 1;
transform: translate(0, 0);
}


.slide-in-bottom{
opacity: 0;
transform: translate(0, -100%);
transition: .8s;
}
.slideInBottom{
opacity: 1;
transform: translate(0, 0);
}

.slide-in-bottom-inner:before,
.slide-in-bottom-inner:after{
opacity: 0;
transform: translate(0, -100%);
transition: .8s;
}
.slideInBottomInner:before,
.slideInBottomInner:after{
opacity: 1;
transform: translate(0, 0);
}


.fade-in{
opacity: 0;
transition: .8s;
}
.fadeIn{
opacity: 1;
}

.fade-in-inner:before,
.fade-in-inner:after{
opacity: 0;
transition: .8s;
}
.fadeInInner:before,
.fadeInInner:after{
opacity: 1;
}


.fade-out{
opacity: 1;
transition: .8s;
}
.fadeOut{
opacity: 0;
}

.fade-out-inner:before,
.fade-out-inner:after{
opacity: 1;
transition: .8s;
}
.fadeOutInner:before,
.fadeOutInner:after{
opacity: 0;
}


.rotate-right-10deg{
transform: rotate:(-10deg);
-webkit-transform: rotate(-10deg);  
-moz-transform: rotate(-10deg);  
opacity: 0;
transition: .8s;
}
.rotateRight10deg{
transform: rotate:(0deg);
-webkit-transform: rotate(0deg);  
-moz-transform: rotate(0deg);  
opacity: 1;
}

.rotate-right-20deg{
transform: rotate:(-20deg);
-webkit-transform: rotate(-20deg);  
-moz-transform: rotate(-20deg);  
opacity: 0;
transition: .8s;
}
.rotateRight20deg{
transform: rotate:(0deg);
-webkit-transform: rotate(0deg);  
-moz-transform: rotate(0deg);  
opacity: 1;
}

.rotate-right-60deg{
transform: rotate:(-60deg);
-webkit-transform: rotate(-60deg);  
-moz-transform: rotate(-60deg);  
opacity: 0;
transition: .8s;
}
.rotateRight60deg{
transform: rotate:(0deg);
-webkit-transform: rotate(0deg);  
-moz-transform: rotate(0deg);
opacity: 1;
}



.before-white:before{
content: "";
display: inline-block;
background-color: #fff;
width: 100%;
height:100%;
z-index: 100;
position: absolute;
}


.before-black:before{
content: "";
display: inline-block;
background-color: #000;
width: 100%;
height:100%;
z-index: 100;
position: absolute;
}




animation-delay: -2s;

/* transition-delay */
.delay0,.delay0:before,.delay0:after{ transition-delay:0s;animation-delay:0; }
.delay02,.delay02:before,.delay02:after{ transition-delay:.2s;animation-delay:.2s; }

.delay04,.delay04:before,.delay04:after{ transition-delay:.4s;animation-delay:.4s; }
.delay05,.delay05:before,.delay05:after{ transition-delay:.5s;animation-delay:.5s; }
.delay06,.delay06:before,.delay06:after{ transition-delay:.6s;animation-delay:.6s; }
.delay08,.delay08:before,.delay08:after{ transition-delay:.8s;animation-delay:.8s; }
.delay1,.delay1:before,.delay1:after{ transition-delay:1s;animation-delay:1s; }
.delay12,.delay12:before,.delay12:after{ transition-delay:1.2s;animation-delay:1.2s; }
.delay14,.delay14:before,.delay14:after{ transition-delay:1.4s;animation-delay:1.4s; }
.delay16,.delay16:before,.delay16:after{ transition-delay:1.8s;animation-delay:1.8s; }
.delay18,.delay18:before,.delay18:after{ transition-delay:1.8s;animation-delay:1.8s; }
.delay2,.delay2:before,.delay2:after{ transition-delay:2s;animation-delay:2s; }
.delay22,.delay22:before,.delay22:after{ transition-delay:2.2s;animation-delay:2.2s; }
.delay24,.delay24:before,.delay24:after{ transition-delay:2.4s;animation-delay:2.4s; }
.delay26.delay26:before,.delay26:after{ transition-delay:2.6s;animation-delay:2.6s; }
.delay28,.delay28:before,.delay28:after{ transition-delay:2.8s;animation-delay:2.8s; }
.delay3,.delay3:before,.delay3:after{ transition-delay:3s;animation-delay:3s; }
.delay32,.delay32:before,.delay32:after{ transition-delay:3.2s;animation-delay:3.2s; }
.delay34,.delay34:before,.delay34:after{ transition-delay:3.4s;animation-delay:3.4s; }
.delay36,.delay36:before,.delay36:after{ transition-delay:3.6s;animation-delay:3.6s; }
.delay38,.delay38:before,.delay38:after{ transition-delay:3.8s;animation-delay:3.8s; }
.delay4,.delay4:before,.delay4:after{ transition-delay:4s;animation-delay:4s; }
.delay42,.delay42:before,.delay42:after{ transition-delay:4.2s;animation-delay:4.2s; }
.delay44,.delay44:before,.delay44:after{ transition-delay:4.4s;animation-delay:4.4s; }
.delay46,.delay46:before,.delay46:after{ transition-delay:4.6s;animation-delay:4.6s; }
.delay48,.delay48:before,.delay48:after{ transition-delay:4.8s;animation-delay:4.8s; }
.delay5,.delay5:before,.delay5:after{ transition-delay:5s;animation-delay:5s; }


/* transition-duration */
.duration0,.duration0:before,.duration0:after{transition-duration: 0s;animation-duration: 0s;}
.duration02,.duration02:before,.duration02:after{transition-duration: .2s;animation-duration: 0.2s;}
.duration04,.duration04:before,.duration04:after{transition-duration: .4s;animation-duration: .4s;}
.duration06,.duration06:before,.duration06:after{transition-duration: .6s;animation-duration: .6s;}
.duration08,.duration08:before,.duration08:after{transition-duration: .8s;animation-duration: .8s;}
.duration1,.duration1:before,.duration1:after{transition-duration: 1s;animation-duration: 1s;}
.duration12,.duration12:before,.duration12:after{transition-duration: 1.2s;animation-duration: 1.2s;}
.duration14,.duration14:before,.duration14:after{transition-duration: 1.4s;animation-duration: 1.4s;}
.duration16,.duration16:before,.duration16:after{transition-duration: 1.6s;animation-duration: 1.6s;}
.duration18,.duration18:before,.duration18:after{transition-duration: 1.8s;animation-duration: 1.8s;}
.duration2,.duration2:before,.duration2:after{transition-duration: 2s;animation-duration: 2s;}



/* easing */
.easeInSine,.easeInSine:before,.easeInSine:after{ transition-timing-function:cubic-bezier(0.47, 0, 0.745, 0.715); }
.easeOutSine,.easeOutSine:before,.easeOutSine:after{ transition-timing-function:cubic-bezier(0.39, 0.575, 0.565, 1); }
.easeInOutSine,.easeInOutSine:before,.easeInOutSine:after{ transition-timing-function:cubic-bezier(0.445, 0.05, 0.55, 0.95); }
.easeInOutQuad,.easeInOutQuad:before,.easeInOutQuad:after{ transition-timing-function:cubic-bezier(0.455, 0.03, 0.515, 0.955); }
.easeInCubic,.easeInCubic:before,.easeInCubic:after{ transition-timing-function:cubic-bezier(0.55, 0.055, 0.675, 0.19); }
.easeOutCubic,.easeOutCubic:before,.easeOutCubic:after{ transition-timing-function:cubic-bezier(0.215, 0.61, 0.355, 1); }
.easeInOutCubic,.easeInOutCubic:before,.easeInOutCubic:after{ transition-timing-function:cubic-bezier(0.645, 0.045, 0.355, 1); }
.easeInOutQuart,.easeInOutQuart:before,.easeInOutQuart:after{ transition-timing-function:cubic-bezier(0.77, 0, 0.175, 1); }
.easeInOutQuint,.easeInOutQuint:before,.easeInOutQuint:after{ transition-timing-function:cubic-bezier(0.86, 0, 0.07, 1); }
.easeOutCirc,.easeOutCirc:before,.easeOutCirc:after{ transition-timing-function:cubic-bezier(0.075, 0.82, 0.165, 1); }
.easeOutExpo,.easeOutExpo:before,.easeOutExpo:after{ transition-timing-function:cubic-bezier(0.19, 1, 0.22, 1); }
.easeInOutExpo,.easeInOutExpo:before,.easeInOutExpo:after{ transition-timing-function:cubic-bezier(1, 0, 0, 1); }
.easeInBack,.easeInBack:before,.easeInBack:after{ transition-timing-function:cubic-bezier(0.175, 0.885, 0.32, 1.275); }
.easeOutBack,.easeOutBack:before,.easeOutBack:after{ transition-timing-function:cubic-bezier(0.6, -0.28, 0.735, 0.045); }
.easeInOutBack,.easeInOutBack:before,.easeInOutBack:after{ transition-timing-function:cubic-bezier(0.68, -0.55, 0.265, 1.55); }


.trans-l,.trans-l:before,.trans-l:after{transform-origin:left center;}
.trans-r,.trans-r:before,.trans-r:after{transform-origin:right center;}
.trans-t,.trans-t:before,.trans-t:after{transform-origin:center top;}
.trans-b,.trans-b:before,.trans-b:after{transform-origin:center bottom;}
.trans-tl,.trans-tl:before,.trans-tl:after{transform-origin:left top;}
.trans-tr,.trans-tr:before,.trans-tr:after{transform-origin:right top;}
.trans-bl,.trans-bl:before,.trans-bl:after{transform-origin:left top;}
.trans-br,.trans-br:before,.trans-br:after{transform-origin:right top;}








.before-test:before{
content: attr(data-text);
background-color: #ccc;
width: 100%;
height: 100%;
display: inline-block;
}








/*簡易CSSスライド*/
.slide-mask {
width:800px;
height:400px;
margin:0 auto;
position:relative;
overflow:hidden;
margin-top: 100px;
}
.slide-mask section {
margin:0;
padding: 0;
width:100%;
top:0;
left:100%;
position:absolute;
overflow:hidden;
animation:slideImage 12s 0s infinite;
}
.slide-mask.animation-slide-4images section {
animation:slideImage4Images 12s 0s infinite;
left:0%;
}
.slide-mask.animation-slide-3images section {
animation:slideImage3Images 9s 0s infinite;
left:0%;
}
.slide-mask.animation-slide-2images section {
animation:slideImage2Images 6s 0s infinite;
left:0%;
}
.slide-mask.animation-fade-4images section {
animation:fadeImage4Images 12s 0s infinite;
left:0%;
}
.slide-mask.animation-fade-3images section {
animation:fadeImage3Images 9s 0s infinite;
left:0%;
}
.slide-mask.animation-fade-2images section {
animation:fadeImage2Images 6s 0s infinite;
left:0%;
}
.slide-mask section:before {
content:attr(data-cap);
position:absolute;
padding:0.5em 1em;
background:#000;
color:#fff;
width: 100%;
transition:opacity 0.5s;
opacity:0;
z-index: 10;
}
.slide-mask section:hover:before {
opacity:1;
}
.slide-mask section:nth-of-type(1) {
animation-delay:0s;/*12/4*(1-1) ※dulation/総数*順番-1*/
}
.slide-mask section:nth-of-type(2) {
animation-delay:3s;/*12/4*(2-1)*/
}
.slide-mask section:nth-of-type(3) {
animation-delay:6s;/*12/4*(3-1)*/
}
.slide-mask section:nth-of-type(4) {
animation-delay:9s;/*12/4*(4-1)*/
}

.slide-mask.animation-fade section:nth-of-type(1) {
animation-delay:1.5s;/*12/4*(1-1) ※dulation/総数*順番-1スタート遅れた分だけ1.5足してる*/
}
.slide-mask.animation-fade section:nth-of-type(2) {
animation-delay:4.5s;/*12/4*(2-1)*/
}
.slide-mask.animation-fade section:nth-of-type(3) {
animation-delay:7.5s;/*12/4*(3-1)*/
}
.slide-mask.animation-fade section:nth-of-type(4) {
animation-delay:10.5s;/*12/4*(4-1)*/
}


/* keyframes for slide */
@keyframes slideImage4Images {
0% {left:100%;z-index: 3;opacity: 1;}/*frameIn開始*/
10% {left:0%;z-index: 3;opacity: 1;}/*(a)全体の1/10秒でframeIn終了*/
25% {left:0%;z-index: 3;opacity: 1;}/*(b)停止してframeOut開始（b = 100/slide数）*/
37% {left:-100%;z-index: 3;opacity: 1;}/*(c)frameOut終了（c = a）*/
50% {left:-100%;z-index: 1;opacity: 0;}
70% {left:100%;z-index: 1;opacity: 0}
80% {left:100%;z-index: 2;opacity: 1;}
}
@keyframes slideImage3Images {
0% {left:100%;z-index: 3;opacity: 1;}/*frameIn開始*/
10% {left:0%;z-index: 3;opacity: 1;}/*(a)全体の1/10秒でframeIn終了*/
33% {left:0%;z-index: 3;opacity: 1;}/*(b)停止してframeOut開始（b = 100/slide数）*/
47% {left:-100%;z-index: 3;opacity: 1;}/*(c)frameOut終了（c = a）*/
50% {left:-100%;z-index: 1;opacity: 0;}
70% {left:100%;z-index: 1;opacity: 0}
80% {left:100%;z-index: 1;opacity: 0;}
}
@keyframes slideImage2Images {
0% {left:100%;z-index: 2;opacity: 1;}/*frameIn開始*/
10% {left:0%;z-index: 2;opacity: 1;}/*(a)全体の1/10秒でframeIn終了*/
50% {left:0%;z-index: 2;opacity: 1;}/*(b)停止してframeOut開始（b = 100/slide数）*/
60% {left:-100%;z-index: 2;opacity: 1;}/*(c)frameOut終了（c = a）*/
65% {left:-100%;z-index: 1;opacity: 0;}
70% {left:100%;z-index: 1;opacity: 0}
}

@keyframes fadeImage4Images {
0% {z-index: 3;opacity: 0;}/*frameIn開始*/
10% {z-index: 3;opacity: 1;}/*(a)全体の1/10秒でframeIn終了*/
25% {z-index: 3;opacity: 1;}/*(b)停止してframeOut開始（b = 100/slide数）*/
35% {z-index: 3;opacity: 0;}/*(c)frameOut終了（c = a）*/
50% {z-index: 1;opacity: 0;}
70% {z-index: 1;opacity: 0}
80% {z-index: 1;opacity: 1;}
}

@keyframes fadeImage3Images {
0% {z-index: 3;opacity: 0;}/*frameIn開始*/
10% {z-index: 3;opacity: 1;}/*(a)全体の1/10秒でframeIn終了*/
33.3% {z-index: 3;opacity: 1;}/*(b)停止してframeOut開始（b = 100/slide数）*/
50% {z-index: 3;opacity: 0;}/*(c)frameOut終了（c = a）*/
60% {z-index: 1;opacity: 0;}
70% {z-index: 1;opacity: 0}
80% {z-index: 1;opacity: 1;}
}

@keyframes fadeImage2Images {
0% {z-index: 3;opacity: 0;}/*frameIn開始*/
10% {z-index: 3;opacity: 1;}/*(a)全体の1/10秒でframeIn終了*/
50% {z-index: 3;opacity: 1;}/*(b)停止してframeOut開始（b = 100/slide数）*/
60% {z-index: 3;opacity: 0;}/*(c)frameOut終了（c = a）*/
70% {z-index: 1;opacity: 0}
}

















/*写真のループアニメーション*/
.photo-list{
background: url(../images/top_basic_bg.jpg) repeat-x;
background-size:1200px auto;/*移動距離と合わせる*/
height:300px;
display: block;
animation:photoListAnim 10s linear infinite;
}
@keyframes photoListAnim{
0% { background-position: 0 0;}
100% { background-position:1200px 0;}
}














/*ボタン*/
.btn {
padding-left:3em;
}
.btn a{
margin:2rem 0;
position:relative;
font-size:2rem;
padding: 1rem;
display: inline-block;
}
.btn a.before:before,
.btn a.after:after{
content: "";
transition:0.5s all ease;
position:absolute;
}
.btn a.before:before{
top:0px;
}
.btn a.after:after{
bottom:0px;
}
.btn a.before:before,
.btn a.after:after{
height:4px;
width:0;
background:#ccc;
}
.btn a.third:after,
.btn a.sixth:before,
.btn a.sixth:after{
/*中央から伸びる*/
left:50%;
transform:translateX(-50%);
}
.btn a.fourth:before,
.btn a.fourth:after,
.btn a.first:after,
.btn a.seventh:after,
.btn a.eigth:before{
left:0;
}
.btn a.fifth:before,
.btn a.fifth:after,
.btn a.second:after,
.btn a.seventh:before,
.btn a.eigth:after{
right:0;
}
.btn a.before:hover:before,
.btn a.after:hover:after{
width:100%;
}
.square{
box-sizing:border-box;
position:relative;
font-size:2rem;
overflow:hidden;
padding: 5px 10px;
background-color: #eee;
display: inline-block;
margin:2rem 0;
}
.square a{
position:static;
margin:0;
}
.square:before,
.square:after{
content: "";
box-sizing:border-box;
transition:0.25s all ease;
position:absolute;
width:4px;
height:0;
background:#ccc;
}
.square:before{
left:0;
bottom:0px;
}
.square:after{
right:0;
top:0px;
}
.square.individual:before{
transition-delay:0.6s;
}
.square.individual:after{
transition-delay:0.3s;
}
.square a:before{
left:0;
transition:0.3s all ease;
}
.square a:after{
right:0;
transition:0.3s all ease;
}
.square.individual a:after{
transition:0.3s all ease 0.4s;
}
.square:hover:before,
.square:hover:after{
height:100%;
}
.square:hover a:before,
.square:hover a:after{
width:100%;
}



















@media screen and (min-width:768px) {
}/* min-width:768px; */


@media screen and (min-width:960px) {
}/* min-width:960px; */