/*===============================================
button

<a class="button button--round button--large" href="">
    大きいボタンの場合
    <span class="mark--cornerLT"></span>
    <span class="mark--cornerRT"></span>
    <span class="mark--cornerLB"></span>
    <span class="mark--cornerRB"></span>
</a>
<a class="button button--round" href="">
    ふつうのサイズのボタン
    <span class="mark--cornerLT"></span>
    <span class="mark--cornerRT"></span>
    <span class="mark--cornerLB"></span>
    <span class="mark--cornerRB"></span>
</a>


===============================================*/
.button{
    display: inline-block;
    position: relative;
    font-weight: normal;
    text-align: center;
    border:1px dashed #099c7f;/*#419271 *#217d66; #6ac48f*/
    line-height: 1.8;
    text-decoration: none;
    background: #fff;
}

.button:hover{
    color: #fff;
    border-style: solid;
    border-radius: 0;
    background-color:#099c7f;/*#217d66; #6ac48f*/
}

.button--normal{
    margin: 0;
    padding: 0.5em 2em 0.4em 2em;
    font-size: 14px;
    text-indent: -0.5em;
}
.button--normal:after{
    content: "▶︎";
    display: block;
    font-size: 0.7em;
    position: absolute;
    right: 1em;
    top: 26%;
}

.button.invert:after{
    line-height: 3em;
    -webkit-transform: translateX(-7px) rotate(90deg);
            transform: translateX(-7px) rotate(90deg);
}
.active .btn--more__acc .button.invert:after{
    line-height: 1.1em;
    -webkit-transform: translateX(-7px) rotate(-90deg);
            transform: translateX(-7px) rotate(-90deg);
}
.button--large{
    /*width: 50%;*/
    margin: 60px auto 100px;
    padding: 1.5em;
    font-size: 1.1em;
    display: block;
    letter-spacing: 0.5em;
    border-radius: 0;
}
.button--large:after{
    content: "▶︎";
    display: block;
    font-size: 0.7em;
    position: absolute;
    right: 1em;
    top: 36%;
}
.button--round{
    border-radius: 100px;
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    -o-border-radius: 100px;
    -ms-border-radius: 100px;
}
.button--img {
    display: table;
    padding: 0.5em 1em 0.5em 0.5em;
}
.button--img-small{
    display: inline-block;
    padding: 0.5em 1em 0.5em 0.5em;
}
.button--img__text{
    padding-left: 0.5em;
    display: table-cell;
    vertical-align: middle;
}
.button--img-small .button--img__text{
    display: inline-block;
    padding-left: 0.5em;
}

.button--img img{
    width: 110px;
    display: table-cell;
    vertical-align: middle;
}
.button--img-small img{
    width: 50px;
    display: inline-block;
}
.button--img:hover img{
    border-radius: 0;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    -ms-border-radius: 0;
}
.button:hover .mark--cornerLT{
    top: -4px;
    left: -4px;
}
.button:hover .mark--cornerRT{
    top: -4px;
    right: -4px;
}
.button:hover .mark--cornerLB{
    bottom: -4px;
    left: -4px;
}
.button:hover .mark--cornerRB{
    bottom: -4px;
    right: -4px;
}

.button_baloon_wrap{
    position: absolute;
    z-index: 3;
    top: 20vh;
    left: 53vw;
    -webkit-animation: moveUp 2.5s cubic-bezier(0.34, 0.05, 0.4, 0.99) infinite alternate;
            animation: moveUp 2.5s cubic-bezier(0.34, 0.05, 0.4, 0.99) infinite alternate;
}
.button_baloon{
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 2s cubic-bezier(0.34, 0.05, 0.4, 0.99);
    transition: all 2s cubic-bezier(0.34, 0.05, 0.4, 0.99);
    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-transform: translate3d(0, -5%, 0);
            transform: translate3d(0, -5%, 0);
}
.button_baloon.is--view,
.button_baloon_wrap.is--subpage .button_baloon{
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
@-webkit-keyframes moveUp{
    from{
        -webkit-transform:translate3d(0, 0, 0);
                transform:translate3d(0, 0, 0);
    }
    50%{
        -webkit-transform:translate3d(0, -3%, 0);
                transform:translate3d(0, -3%, 0);
    }
    100%{
        -webkit-transform:translate3d(0, 3%, 0);
                transform:translate3d(0, 3%, 0);
    }
}
@keyframes moveUp{
    from{
        -webkit-transform:translate3d(0, 0, 0);
                transform:translate3d(0, 0, 0);
    }
    50%{
        -webkit-transform:translate3d(0, -3%, 0);
                transform:translate3d(0, -3%, 0);
    }
    100%{
        -webkit-transform:translate3d(0, 3%, 0);
                transform:translate3d(0, 3%, 0);
    }
}
.button_baloon{
    padding: 5px 5px 2em 5px;
    position: relative;
    -webkit-writing-mode: vertical-rl;
        -ms-writing-mode: tb-rl;
            writing-mode: vertical-rl;
    -webkit-transition-duration: 0.4s;
            transition-duration: 0.4s;
    /* box-shadow: 2px 1px 3px rgba(0,0,0,0.3); */
}
.button_baloon_wrap.is--subpage{
    left: auto;
    right: 40px;
    top: 40px;
}
.button_baloon_wrap.is--subpage .button_baloon{
    -webkit-writing-mode: horizontal-tb;
        -ms-writing-mode: lr-tb;
            writing-mode: horizontal-tb;
}
.button_baloon_wrap.is--subpage .button--img__text.is--style_maru {
    padding-top: 0;
    font-size: 15px;
}

.button.button_baloon:hover{
    color: #fff;
    border-radius: 10px;
    background-color:#099c7f;/*#217d66; #6ac48f*/
}
.button_baloon:after{
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 10px;
    border-top: 7px solid transparent;
    border-right: 0 solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 20px solid #099c7f;
    -webkit-transform-origin: left center;
            transform-origin: left center;
    -webkit-transform: rotate(132deg);
            transform: rotate(132deg);
}
.button_baloon.button--img-small img{
    width: 60px;
}
.button--img__text.is--style_maru{
    padding-top: 0.5rem;
    font-size: 18px;
    letter-spacing: 3px;
    line-height: 1.5;
    padding-left: 0;
    font-family: "tbchibirgothicplusk-pro";
}