@charset "utf-8";

/* ------------------------------------
        共通設定
--------------------------------------*/
button {
    transition: .2s;
}

button:hover {
    opacity: .5;
}


/* ------------------------------------
        基本のボタン
--------------------------------------*/
._mainBtn {
    font-family: var(--design-font);
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 2px;
    position: relative;
    width: 180px;
    height: 60px;
    margin: 0 auto var(--int2);
    font-size: 30px;
    /* clip-path: polygon(16px 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%, 0 16px); */
    transition: .2s;
    border-radius: 30px 0;
    box-shadow: 0 2px 3px 0 rgba(0,0,0,.2);
}

._mainBtn::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: 20px;
    margin-right: -40px;
}

._mainBtn._b::after {
    content: '';
    background-image: url('../img/lineArrow_white.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

._mainBtn._w::after {
    content: '';
    background-image: url('../img/lineArrow_black.svg');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}


/*
._mainBtn::after {
    content:'▶';
    right: 10px;
    font-size: .3em;
    position: absolute;
}
*/

._mainBtn._b {
    background-color: var(--black);
    color: var(--white);
}
._mainBtn._w {
    background-color: var(--white);
    color: var(--black);
}

._mainBtn:hover {
    cursor: pointer;
    opacity: .5;
}

/* スマホ表示 */
@media screen and (max-width: 600px) {
    ._mainBtn {
        min-width: 160px;
        height: 50px;
    }

    ._mainBtn::after {
        width: 14px;
        height: 14px;
    }

}






/* ------------------------------------
        黒ベースボタン
--------------------------------------*/
._blackBtn {
    color: var(--white);
    opacity: .3;
    background-color: var(--black);
}

._blackBtn:hover {
    opacity: 1;
}



/* ------------------------------------
        質問・矢印ボタン
--------------------------------------*/
._arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    background-color: var(--black);
    color: var(--white);
    transition: .2s;
    opacity: .5;
    font-weight: 100;
}

._arrow._right {
    -webkit-clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
    clip-path: polygon(0% 0%, 88% 0%, 100% 50%, 88% 100%, 0% 100%);
    padding: 0 20px 0 10px;
  }

._arrow._left {
    -webkit-clip-path: polygon(0 50%, 12% 0, 100% 0, 100% 100%, 12% 100%);
    clip-path: polygon(0 50%, 12% 0, 100% 0, 100% 100%, 12% 100%);
    padding: 0 10px 0 20px;
}

._arrow:hover {
    opacity: 1;
}


/* ------------------------------------
        質問・リセットボタン（シンプル）
--------------------------------------*/
._littleBtn {
    width: 28px;
    height: 28px;
    background-color: var(--black);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: .5;
}

._littleBtn:hover {
    opacity: 1;
}

._littleBtn img {
    transform: scale(.7);
}





/* ------------------------------------
        タブボタン
--------------------------------------*/
._Tab {
    transition: .2s;
    opacity: .2;
    cursor: pointer;
}

._Tab:hover {
    opacity: 1;
}


/* ------------------------------------
        SNS・リンク
--------------------------------------*/
.mentuzzleSite {
    background-color: var(--black);
    color: var(--white);
    font-size: 20px;
    border-radius: 50em;
    padding: 6px 40px;
}

.followButton {
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    border: solid 2px #000;
    box-sizing: border-box;
    color: #fff;
    border-radius: 50%;
}

.followButton img {
    width: 100%;
    transform: scale(.8);
    transition: all 0.2s ease;
}