@charset "UTF-8";
/*-------------------------------------------
btn
-------------------------------------------*/
/* ------------------------------
   ボタン本体
------------------------------ */

.btn {
    /* 変更用変数 */
    --btn-padding-y: 0.75em;
    --btn-padding-x: 1em;
    --btn-font-size: 1.0rem;
    --btn-gap: 0.5em;


    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);

    padding: var(--btn-padding-y) var(--btn-padding-x);
    font-size: var(--btn-font-size);
    line-height: 1;

    border-radius: 4px;
    background: var(--color-accent);
    color: #fff;

    text-decoration: none;
    cursor: pointer;
}

/* ------------------------------
   アイコン
------------------------------ */

.btn-icon {
    display: inline-flex;
    align-items: center;
}

/* SVG / img 共通 */
.btn-icon svg,
.btn-icon img {
    width: 1em;
    height: 1em;
}

/* 矢印アイコンをつけるクラス */

.btn-icon-arrow {
    --arrow-size: 0.5em;
    --arrow-weight: 2px;

    width: var(--arrow-size);
    height: var(--arrow-size);

    border-top: var(--arrow-weight) solid currentColor;
    border-right: var(--arrow-weight) solid currentColor;

    transform: rotate(45deg);
}

.btn:hover .btn-icon-arrow {
    transform: translateX(2px) rotate(45deg);
}

/* ------------------------------
   テキスト
------------------------------ */

.btn-label {
    white-space: nowrap;
}

/* ------------------------------
   ボタン配置用ラッパー
------------------------------ */
.btn-wrap {
    display: flex;
}

/* 左寄せ */
.btn-wrap.is-left {
    justify-content: flex-start;
}

/* 中央寄せ */
.btn-wrap.is-center {
    justify-content: center;
}

/* 右寄せ */
.btn-wrap.is-right {
    justify-content: flex-end;
}


/*-------------------------------------------
ボタン以外ができたらわかりやすくできるように経集する！！！
ここまでがボタン！！みたいな感じで分かりづらい
-------------------------------------------*/