@charset "utf-8";
/* CSS Document */

/*header----------------------------*/

.menu-btn{
    position: relative;
    display: inline-block;
    width: 100px;
    height: 10px;
    cursor: pointer;
}
.menu-btn span{
    position: absolute;
    left: 0;
    width: 14px;
    height: 1px;
    transition: all .2s;
    background-color: #ECEBEB;
    display: block;
}
.menu-btn span:first-of-type{
    top: 0;
}
.menu-btn span:last-of-type{
    bottom: 0;
}
/*about---------------------------------*/
.about{
    background-image: url("../image/common/about_header.jpg");
    background-size: cover;
    filter: grayscale(100%);
    background-position: center;
    height: 150px;
    background-repeat: no-repeat;
    position: relative;
}
.about:hover{
    filter: grayscale(0);
}
.border{
    display: flex;
    align-items: center;
    justify-content: center; 
}
.border:after {
  border-top: 1px solid;
  content: "";
  width: 100%; 
  margin-left: .5rem;
}
.rotate{
    transform: rotate(90deg)
}
.list li:before{
    content: "_";
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}
@keyframes flash {
  0%,100% {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

#typewriter{
    color: #fff;
    font-size: 1.6rem;
    font-family:'Playfair Display',serif;
}
#typewriter::after {
    content: "|";
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
#typewriter2{
    color: #fff;
    font-size: 1.6rem;
    font-family:'Playfair Display',serif;
}
#typewriter2::after {
    content: "|";
    animation-name: blink;
    animation-duration: 1s;
    animation-iteration-count: infinite;
}

@keyframes blink {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/*member-------------------------------*/
.member{
    background-image: url("../image/member/member_header.jpg");
    background-size: cover;
    filter: grayscale(100%);
    background-position: center;
    height: 150px;
    background-repeat: no-repeat;
    position: relative;
}
.member:hover{
    filter: grayscale(0);
}

.slide{
     max-width: 250px;
     height: 500px;
     width: 100%;
     margin-right: 5%;
}
.slide:last-child{
    margin-right: 0;
}