/* 文字付きボタンの共通スタイル */
.btn__accent-color,
.btn__white,
.btn__inactive-color {
    display: inline-block;
    min-width: 240px;
    height: 48px;
    padding: 0 32px;
    text-align: center;
    line-height: 48px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 24px;
}

.btn__link {
    display: inline-block;
    min-width: 240px;
    height: 48px;
    padding: 0;
    text-align: center;
    line-height: 48px;
    font-size: 20px;
    font-weight: bold;
    border-radius: 24px;
}

.btn__link > a {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 0 32px;
    border-radius: 24px;
}

.btn__accent-color > a,
.btn__white > a,
.btn__inactive-color > a {
    display: inline-block;
    width: 100%;
    height: 100%;
}

/* 背景がアクセントカラーのボタン */
.btn__accent-color {
    color: var(--var-white-color);
    background-color: var(--var-accent-color);
}

/* 背景が白のボタン */
.btn__white {
    color: var(--var-black-color);
    background-color: var(--var-white-color);
}

/* 背景が灰色のボタン */
.btn__inactive-color {
    color: var(--var-white-color);
    background-color: #d9d9d9;
}

/* 削除アイコンのボタン */
.btn__delete {
    width: 40px;
    height: 40px;
    border-radius: 24px;
}

.btn__delete:before {
    display: inline-block;
    width: 40px;
    height: 40px;
    color: var(--var-black-color);
    text-align: center;
    vertical-align: middle;
    line-height: 40px;
    font-size: 20px;
}

/* ボタンの影 */
.btn__shadow {
    box-shadow: 0 0 6px 0 rgba(55, 75, 101, 0.2);
}

/* ボタンにマウスを当てた時のスタイル */
.btn__hover:hover {
    opacity: 0.8;
    transition: 0.3s;
}