/**
 * CTAバナー用のCSS
 * ---------------------------
 * 2025.11.07 created TOP/画面右それぞれCSSで配置、画面右のみ常に表示
 *
 **/

/* --- 共通ボタンスタイル --- */
.cta-float-top .cta-btn,
.cta-float-side .cta-btn {
    display: block;
    padding: 15px 8px;
    background-color: #f37d3b;
    border: solid 1px #f37d3b;
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s ease;
    text-align: center;
    font-size: 1em;
}
.cta-float-top .cta-btn:hover,
.cta-float-side .cta-btn:hover {
    background-color: #fff;
    color: #f37d3b;
}

/* 上部ボタン：モバイル非表示 ---------------------------- */
.cta-float-top {
    display: none;
}

/* 右側ボタン：常に表示 --------------------------------- */
.cta-float-side {
    position: fixed;
    top:10em;
    right: 0;
    z-index: 9999;
    /* padding-right: calc(env(safe-area-inset-right, 0px)); */
}
/* 右側ボタン：見た目を調整 */
.cta-float-side .cta-btn {
    writing-mode: vertical-rl; /* 縦書き表示 */
    letter-spacing: 2px;
    border-radius: 6px 0 0 6px;
    border-right: 0px;
    width: 2em;
    font-weight: normal;
}
/* 括弧：微調整 */
.cta-float-side .cta-btn .kakko:first-of-type {
    margin-inline-start: -0.5em;
}
.cta-float-side .cta-btn .kakko:last-of-type {
    margin-inline-end: -0.5em;
}
/*  右側ボタン end -------------------------------------- */


/* --- PC以上の画面 --- */
@media (min-width: 769px) {

    /* 上部ボタン：表示して右上に配置 ---------------- */
    .cta-float-top {
        display: flex;
        position: fixed;
        top: 8px;
        right: 10%;
        gap: 10px;/* ボタンの間隔 */
        z-index: 9999;
    }
    /* ボタン：見た目を調整 */
    .cta-float-top .cta-btn {
        border-radius: 10px;
        padding: 10px 20px;
    }
    /* 資料請求ボタン:色を調整 */
    .cta-float-top .cta-btn.cta-top-request{
        background-color: #48484a;
        border-color: #48484a;
    }
    .cta-float-top .cta-btn.cta-top-request:hover {
        background-color: #fff;
        color: #48484a;
    }
    /* 上部ボタン end ---------------------------- */
}