/*-**********************************
transitionはanim.cssへ


/*----------------------------------

Case bg dark

/*--------------------------------
Main
---------------------*/
.btn_main {
    font-size: 1.8rem;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-align: center;
    -webkit-align-items: center;
            align-items: center;
    margin-top: 5rem;
    color: #fff;
}
.btn_main.hover {
    text-decoration: none;
}

/*----------------------
text
---------------------*/
.btn_txt {
    font-size: 1.6rem;
    line-height: 1;
    font-weight: bold;
    margin-top: -1.5rem;
    padding-right: 2em;
    border-bottom: 1px solid #000;
    background:#9c762b;
    padding:5px 1em;
    margin-right: 20px;

}
.btn_main.hover .btn_txt {
    letter-spacing: 0.15em;
    background:#000;
    border-radius: 0 30px 30px 0;

}


/*----------------------------------

Case image-lager inner

------------------------------------
Circle
---------------------*/
.anim--img_larger .btn_circle {
    width: 6.2rem;
    height: 6.2rem;
    border-radius: 4.5em;
    background-color: transparent;
    position: absolute;
    top: 50%;
    left: 50%;
    opacity: 0;
    -webkit-transform-origin:center center;
        -ms-transform-origin:center center;
            transform-origin:center center;
    -webkit-transform:translate(-50%, -50%);
        -ms-transform:translate(-50%, -50%);
            transform:translate(-50%, -50%);
    border:1px solid #fff;
}
.anim--img_larger .btn_circle:before,
.anim--img_larger .btn_circle:after{
    height: 1px;
    background-color: #fff;
}
.anim--img_larger .btn_circle:after {
    -webkit-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
            transform: rotate(45deg);
}
/*----------------------
Circle hover
-----------------------*/
.anim--block.hover .btn_circle {
    opacity: 1;
    -webkit-transform:scale(0.8) translate(0%, -50%);
        -ms-transform:scale(0.8) translate(0%, -50%);
            transform:scale(0.8) translate(0%, -50%);
}
.anim--block.hover .btn_circle:before{
    width: 200%;
    left: -150%;
}
.anim--block.hover .btn_circle:after {
    -webkit-transform: rotate(765deg);
        -ms-transform: rotate(765deg);
            transform: rotate(765deg);
}

/*----------------------------------

Case rotate 90deg

----------------------------------*/
.btn_wrap_rotate{
    width: 223px;
    margin: 0 auto;
    display: block;
    text-align: left;
    left: 0;
    -webkit-transform-origin: center top;
        -ms-transform-origin: center top;
            transform-origin: center top;
    -webkit-transform: translate(10% ,145%) rotate(90deg);
        -ms-transform: translate(10% ,145%) rotate(90deg);
            transform: translate(10% ,145%) rotate(90deg);
}

/*----------------------------------------------------

btn img larger

----------------------------------------------------*/
/*---------------------
img larger
---------------------*/
.anim--img_larger{
    line-height: 0;
}
.anim--img_larger:after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 50%;
    width: 0;
    background-color: rgba(255,255,255, 0.1);
}
.anim--block.hover .anim--img_larger,
.anim--block:hover .anim--img_larger{ -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.anim--block.hover .anim--img_larger:after,
.anim--block:hover .anim--img_larger:after { left:0; width:100%; }