@charset 'UTF-8';
/* ==========================================
   ボタン系コンポーネント
   ========================================== */
/* --- フォームへのリンク (bl_post-to_form) --- */
.bl_post-to_form
{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-block: min(calc(40 / 1440 * 100vw), 40px);
}
.bl_post-to_form-link
{
    font-weight: normal;

    position: relative;

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    min-width: min(calc(240 / 1440 * 100vw), 240px);
    padding: min(calc(20 / 1440 * 100vw), 20px) min(calc(30 / 1440 * 100vw), 30px);

    color: #c03;
    border: solid 1px #c03;
    border-radius: min(calc(8 / 1440 * 100vw), 8px); 

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-column-gap: min(calc(8 / 1440 * 100vw), 8px);
       -moz-column-gap: min(calc(8 / 1440 * 100vw), 8px);
            column-gap: min(calc(8 / 1440 * 100vw), 8px);
}
.bl_post-to_form-link-text
{
    line-height: 1.4;

    text-align: center; 

    -webkit-box-flex: 1;
    -ms-flex: 1;
        flex: 1;
}
.bl_post-to_form-link-arrow
{
    position: absolute;
    top: 50%;
    right: min(calc(16 / 1440 * 100vw), 16px);

    width: min(calc(16 / 1440 * 100vw), 16px); 

    translate: 0 -50%;
}
.bl_post-to_form-link-arrow svg
{
    rotate: 90deg;
}
.bl_post-to_form-link-arrow.bl_post-to_form-link-arrow__right svg
{
    rotate: 0deg;
}

/* ============================================================
   ボタン共通ベース
   ============================================================ */
.bl_post-btn_bg_red,
.bl_post-btn_bg_red_arrow,
.bl_post-btn_bg_red_newTab,
.bl_post-btn_bg_white,
.bl_post-btn_bg_white_arrow,
.bl_post-btn_bg_white_newTab,
.bl_post-btn_bg_gray,
.bl_post-btn_bg_gray_arrow,
.bl_post-btn_bg_gray_newTab,
.bl_post-btn_bg_black,
.bl_post-btn_bg_black_arrow,
.bl_post-btn_bg_black_newTab
{
    margin-block: 0;
}

.bl_post-btn_bg_red-link,
.bl_post-btn_bg_red_arrow-link,
.bl_post-btn_bg_red_newTab-link,
.bl_post-btn_bg_white-link,
.bl_post-btn_bg_white_arrow-link,
.bl_post-btn_bg_white_newTab-link,
.bl_post-btn_bg_gray-link,
.bl_post-btn_bg_gray_arrow-link,
.bl_post-btn_bg_gray_newTab-link,
.bl_post-btn_bg_black-link,
.bl_post-btn_bg_black_arrow-link,
.bl_post-btn_bg_black_newTab-link
{
    font-weight: bold;
    line-height: 1.4;

    position: relative;

    width: -webkit-fit-content;
    width:    -moz-fit-content;
    width:         fit-content;
    min-width: min(calc(240 / 1440 * 100vw), 240px);

    text-align: center;

    border-radius: min(calc(8 / 1440 * 100vw), 8px);

    margin-inline: auto;
}

.bl_post-btn_bg_red_arrow-link,
.bl_post-btn_bg_red_newTab-link,
.bl_post-btn_bg_white_arrow-link,
.bl_post-btn_bg_white_newTab-link,
.bl_post-btn_bg_gray_arrow-link,
.bl_post-btn_bg_gray_newTab-link,
.bl_post-btn_bg_black_arrow-link,
.bl_post-btn_bg_black_newTab-link
{
    font-size: min(calc(18 / 1440 * 100vw), 18px);

    display: block;

    padding: min(calc(16 / 1440 * 100vw), 16px) min(calc(48 / 1440 * 100vw), 48px);
}

.bl_post-btn_bg_red-link,
.bl_post-btn_bg_white-link,
.bl_post-btn_bg_gray-link,
.bl_post-btn_bg_black-link
{
    font-size: min(calc(16 / 1440 * 100vw), 16px);

    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    min-height: min(calc(56 / 1440 * 100vw), 56px); 
    padding: min(calc(8 / 1440 * 100vw), 8px) min(calc(24 / 1440 * 100vw), 24px);

    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.bl_post-btn_bg_red_arrow-link-arrow,
.bl_post-btn_bg_red_newTab-link-arrow,
.bl_post-btn_bg_white_arrow-link-arrow,
.bl_post-btn_bg_white_newTab-link-arrow,
.bl_post-btn_bg_gray_arrow-link-arrow,
.bl_post-btn_bg_gray_newTab-link-arrow,
.bl_post-btn_bg_black_arrow-link-arrow,
.bl_post-btn_bg_black_newTab-link-arrow
{
    position: absolute;
    top: 50%;
    right: min(calc(16 / 1440 * 100vw), 16px);

    display: block;

    width: min(calc(20 / 1440 * 100vw), 20px); 

    translate: 0 -50%;
}

/* ============================================================
   ボタン カラー設定
   ============================================================ */
/* ボタン（赤） */
.bl_post-btn_bg_red-link
{
    color: #fff;
    background: #c03;
}

.bl_post-btn_bg_red_arrow-link
{
    color: #fff;
    background: #c03;
}

.bl_post-btn_bg_red_newTab-link
{
    color: #fff;
    background: #c03;
}

/* ボタン（白） */
.bl_post-btn_bg_white-link
{
    color: #c03;
    border: solid 1px #c03; 
    background: #fff;
}

.bl_post-btn_bg_white_arrow-link
{
    color: #c03;
    border: solid 1px #c03; 
    background: #fff;
}

.bl_post-btn_bg_white_newTab-link
{
    color: #c03;
    border: solid 1px #c03; 
    background: #fff;
}

/* ボタン（グレー） */
.bl_post-btn_bg_gray-link
{
    color: #000;
    border: solid 1px #c4c4c4; 
    background: #efefef;
}

.bl_post-btn_bg_gray_arrow-link
{
    color: #000;
    border: solid 1px #c4c4c4; 
    background: #efefef;
}

.bl_post-btn_bg_gray_newTab-link
{
    color: #000;
    border: solid 1px #c4c4c4; 
    background: #efefef;
}

/* ボタン（黒） */
.bl_post-btn_bg_black-link
{
    color: #fff;
    background: #282828;
}

.bl_post-btn_bg_black_arrow-link
{
    color: #fff;
    background: #282828;
}

.bl_post-btn_bg_black_newTab-link
{
    color: #fff;
    background: #282828;
}

/* ==========================================
   レスポンシブ（SP）
   ========================================== */
@media only screen and (max-width: 767px)
{
    /* フォームリンク */
    .bl_post-to_form
    {
        margin-block: calc(40 / 390 * 100vw);
    }
    .bl_post-to_form-link
    {
        width: 100%;
        padding: calc(13 / 390 * 100vw);

        border-radius: calc(8 / 390 * 100vw); 

        -webkit-column-gap: calc(8 / 390 * 100vw);
           -moz-column-gap: calc(8 / 390 * 100vw);
                column-gap: calc(8 / 390 * 100vw);
    }
    .bl_post-to_form-link-arrow
    {
        right: calc(16 / 390 * 100vw);

        width: calc(16 / 390 * 100vw);
    }
    /* ボタンラッパー */
    .bl_post-btn_bg_red,
    .bl_post-btn_bg_red_arrow,
    .bl_post-btn_bg_red_newTab,
    .bl_post-btn_bg_white,
    .bl_post-btn_bg_white_arrow,
    .bl_post-btn_bg_white_newTab,
    .bl_post-btn_bg_gray,
    .bl_post-btn_bg_gray_arrow,
    .bl_post-btn_bg_gray_newTab,
    .bl_post-btn_bg_black,
    .bl_post-btn_bg_black_arrow,
    .bl_post-btn_bg_black_newTab
    {
        margin-block: 0;
    }
    /* ボタンリンク 全共通 */
    .bl_post-btn_bg_red-link,
    .bl_post-btn_bg_red_arrow-link,
    .bl_post-btn_bg_red_newTab-link,
    .bl_post-btn_bg_white-link,
    .bl_post-btn_bg_white_arrow-link,
    .bl_post-btn_bg_white_newTab-link,
    .bl_post-btn_bg_gray-link,
    .bl_post-btn_bg_gray_arrow-link,
    .bl_post-btn_bg_gray_newTab-link,
    .bl_post-btn_bg_black-link,
    .bl_post-btn_bg_black_arrow-link,
    .bl_post-btn_bg_black_newTab-link
    {
        width: 100%;

        border-radius: calc(8 / 390 * 100vw);
    }
    /* ボタンリンク（矢印・新タブあり） */
    .bl_post-btn_bg_red_arrow-link,
    .bl_post-btn_bg_red_newTab-link,
    .bl_post-btn_bg_white_arrow-link,
    .bl_post-btn_bg_white_newTab-link,
    .bl_post-btn_bg_gray_arrow-link,
    .bl_post-btn_bg_gray_newTab-link,
    .bl_post-btn_bg_black_arrow-link,
    .bl_post-btn_bg_black_newTab-link
    {
        font-size: calc(16 / 390 * 100vw);

        padding: calc(16 / 390 * 100vw) calc(48 / 390 * 100vw);
    }
    /* ボタンリンク（矢印なし） */
    .bl_post-btn_bg_red-link,
    .bl_post-btn_bg_white-link,
    .bl_post-btn_bg_gray-link,
    .bl_post-btn_bg_black-link
    {
        font-size: calc(16 / 390 * 100vw);

        min-height: calc(48 / 390 * 100vw); 
        padding: calc(8 / 390 * 100vw) calc(24 / 390 * 100vw);
    }
    /* ボタンアイコン */
    .bl_post-btn_bg_red_arrow-link-arrow,
    .bl_post-btn_bg_red_newTab-link-arrow,
    .bl_post-btn_bg_white_arrow-link-arrow,
    .bl_post-btn_bg_white_newTab-link-arrow,
    .bl_post-btn_bg_gray_arrow-link-arrow,
    .bl_post-btn_bg_gray_newTab-link-arrow,
    .bl_post-btn_bg_black_arrow-link-arrow,
    .bl_post-btn_bg_black_newTab-link-arrow
    {
        right: calc(16 / 390 * 100vw);

        width: calc(20 / 390 * 100vw);
    }
}