/*
 * ボタンの共通仕様（Figma）：198×44、角丸20px、枠1px、padding 14/24、gap 8px。
 * 文字の大きさは、本文とフッターの CONTACT のボタンで共通（依頼主の指示。0.6rem＋2px＝約14.5px）。
 * ヘッダーのお問い合わせボタンは、大きさも文字も Figma の縮尺で別に指定する（header.css）。
 */
:root {
    --btn-font-size: calc(0.6rem + 2px);
}

.c-btn {
    /* 共通幅。フッターのCONTACTボタンはこの値の1.3倍にしている（footer.css） */
    --btn-base-width: 198px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: var(--btn-base-width);
    height: 44px;
    padding: 14px 24px;
    border-radius: 20px;
    border: 1px solid transparent;
    font-size: var(--btn-font-size);
    font-weight: 500;
    letter-spacing: 0.03em;
    transition: background-color var(--transition-base), color var(--transition-base), border-color var(--transition-base);
    white-space: nowrap;
}

/*
 * デザイン原本のボタンの矢印「〉」。文字との間隔は親の gap:8px が受け持つ。
 * 全角の「〉」は文字送り幅の中で左寄りに描画され、右側に文字の大きさの約0.7倍の空白を含む（実測。本文の文字はほぼ余白なしで始まる）。
 * そのままだと中央揃えに見えないので、矢印の右側だけを詰める。文字の大きさに比例させるため em で指定する
 * （本文の大きさ20.8pxで12px）。フォントを変えたら測り直すこと。
 */
.c-btn__arrow {
    font-weight: 400;
    margin-right: -0.58em;
}

/* 淡い青の帯の上に置く紺のボタン（原本の Message セクション）。白い縁取りで地から浮かせる */
.c-btn--on-blue {
    background-color: var(--color-primary);
    color: var(--color-white);
    border-color: var(--color-white);
}

.c-btn--on-blue:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

/* 紺地のフッター上に置く白い縁取りのボタン */
.c-btn--ghost-white {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.c-btn--ghost-white:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
}

.c-btn--primary {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.c-btn--primary:hover {
    background-color: var(--color-primary-dark);
}

/* 白枠をつける（ホームの紺のボタン：READ MORE／COMPANY／採用情報） */
.c-btn--framed {
    border-color: var(--color-white);
}

.c-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 198px;
    height: 44px;
    padding: 14px 24px;
    border-radius: 20px;
    border: 1px solid transparent;
    background-color: var(--color-bg-alt);
    color: var(--color-text-light);
    font-weight: 700;
    font-size: var(--btn-font-size);
    /* ボタンの文言は折り返さない（スマホで「READ／MORE」と割れていた） */
    white-space: nowrap;
}