@charset "utf-8";

/*-------------------
フェードイン
-------------------*/

/* 画面外にいる状態 */
.fadeUp {
    opacity : 0;
    transform : translate(0, 30px);
    transition : all 500ms;
    }
 
/* 画面内に入った状態 */
.fadeUp.appear {
    opacity : 1;
    transform : translate(0, 0);
    }


/*-------------------
ソート
-------------------*/

.hidden {
    transform : translate(180px, 0);
    transition-timing-function:ease;
	opacity: 0;
}


/*-------------------
SVG
-------------------*/

h1 a div.frame span.line {
    -webkit-transition-delay: 0.3s;transition-delay: 0.3s;
}
    h1 a:hover div.frame span.line.top{
        -webkit-animation: line_draw_top 0.4s ease-in 0s;
        animation: line_draw_top 0.4s ease-in 0s;
    }
    h1 a:hover div.frame span.line.right{
        -webkit-animation: line_draw_right 0.4s ease-in 0s;
        animation: line_draw_right 0.4s ease-in 0s;
    }
    h1 a:hover div.frame span.line.bottom{
        -webkit-animation: line_draw_bottom 0.4s ease-in 0s;
        animation: line_draw_bottom 0.4s ease-in 0s;
    }
    h1 a:hover div.frame span.line.left{
        -webkit-animation: line_draw_left 0.4s ease-in 0s;
        animation: line_draw_left 0.4s ease-in 0s;
    }

@keyframes line_draw_top {
    0% { right: 0; }
    50% { right: -100%; opacity: 1; }
    61% { right: -100%; opacity: 0; }
    62% { right: 100%; opacity: 0; }
    63% { right: 100%; opacity: 1; }
    73% { right: 0; }
    100% { right: 0; }
}
@-webkit-keyframes line_draw_top {
    0% { right: 0; }
    50% { right: -100%; opacity: 1; }
    61% { right: -100%; opacity: 0; }
    62% { right: 100%; opacity: 0; }
    63% { right: 100%; opacity: 1; }
    73% { right: 0; }
    100% { right: 0; }
}

@keyframes line_draw_right {
    0% { bottom: 9%; }
    50% { bottom: 9%; }
    60% { bottom: -100%; opacity: 1; }
    61% { bottom: -100%; opacity: 0; }
    62% { bottom: 100%; opacity: 0; }
    74% { bottom: 100%; opacity: 1; }
    100% { bottom: 9%; }
}
@-webkit-keyframes line_draw_right {
    0% { bottom: 9%; }
    50% { bottom: 9%; }
    60% { bottom: -100%; opacity: 1; }
    61% { bottom: -100%; opacity: 0; }
    62% { bottom: 100%; opacity: 0; }
    74% { bottom: 100%; opacity: 1; }
    100% { bottom: 9%; }
}

@keyframes line_draw_bottom {
    0% { left: 0; }
    50% { left: -100%; opacity: 1; }
    61% { left: -100%; opacity: 0; }
    62% { left: 100%; opacity: 0; }
    63% { left: 100%; opacity: 1; }
    73% { left: 0; }
    100% { left: 0; }
}
@-webkit-keyframes line_draw_bottom {
    0% { left: 0; }
    50% { left: -100%; opacity: 1; }
    61% { left: -100%; opacity: 0; }
    62% { left: 100%; opacity: 0; }
    63% { left: 100%; opacity: 1; }
    73% { left: 0; }
    100% { left: 0; }
}

@keyframes line_draw_left {
    0% { top: 9%; }
    50% { top: 9%; }
    60% { top: -100%; opacity: 1; }
    61% { top: -100%; opacity: 0; }
    62% { top: 100%; opacity: 0; }
    74% { top: 100%; opacity: 1; }
    100% { top: 9%; }
}
@-webkit-keyframes line_draw_left {
    0% { top: 9%; }
    50% { top: 9%; }
    60% { top: -100%; opacity: 1; }
    61% { top: -100%; opacity: 0; }
    62% { top: 100%; opacity: 0; }
    74% { top: 100%; opacity: 1; }
    100% { top: 9%; }
}



/*
h1 a {
}
 
h1 a svg {
    position: absolute;
    top: 0; left: 0;
}

h1 a svg line {
    stroke-width: 3;
    stroke: #222222;
    fill: none;
    -webkit-transition: all .8s ease-in-out .1s;
    transition: all .8s ease-in-out .1s;
}
h1 a:hover svg line.top {
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
}
h1 a:hover svg line.bottom {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}
h1 a:hover svg line.left {
    -webkit-transform: translateY(-100%);
    transform: translateY(-100%);
}
h1 a:hover svg line.right {
    -webkit-transform: translateY(100%);
    transform: translateY(100%);
}

*/