body {
            font-family: 'Inter', 'Noto Sans JP', sans-serif;
        }

html {
  scroll-behavior: smooth;
}

/* --- SEO・アクセシビリティ用の非表示設定 (v2互換) --- */
.fv-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* --- 見出しの基本スタイル --- */
h1, h2 {
    margin: 0;
    padding: 0;
}

.fv-bg-image {
    background-image: url('../images/funvest_referral_camp_bg.jpg');
}

.fv-bg-image-sp {
    background-image: url('../images/funvest_referral_camp_bg_sp.jpg');
}

/* --- キャンペーンバナー --- */
.fv-banner-text {
    font-size: 16px !important;
}


/* --- 期間限定ラベル --- */
.fv-label-date {
    font-size: 14px !important;
}

/* --- 対象者テキスト（ご紹介した方〜） --- */
.fv-target-text {
    font-size: 14px !important;
}

/* --- 注釈テキスト（※30万円以上の〜） --- */
.fv-note-text {
    font-size: 12px !important;
}

.text-sm{
    font-size: 14px;
}

.text-xs{
    font-size: 12px;
}

.text-xxs{
    font-size: 10px;
}

.bg-campaign-pink {
    background-color: #e94174;
}

.text-campaign-pink {
    color: #e94174;
}

.border-campaign-pink {
    border-color: #e94174;
}

.benefit-box {
            border: 2px solid;
            border-radius: 0.8rem;
            padding: 1.8rem;
            padding-bottom: 2.2rem;
            text-align: center;
            background-color: white;
            box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
            transition: transform 0.3s;
            position: relative;
        }
        .benefit-box:hover {
            transform: translateY(-5px);
        }
        .step-box {
            background: #fff;
            padding: 1.5rem;
            border-radius: 0.8rem;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            margin-bottom: 1.5rem;
            border-top-left-radius: 0 !important;
    border-top-right-radius: 0 !important;
        }

.border-orange-400 {
    border-color: #fb923c !important;
}

.border-lime-500 {
    border-color: #84cc16 !important;
}

/* ボタンのテキスト改行を禁止するクラス */
.btn-no-wrap {
    white-space: nowrap !important; /* 絶対に改行させない */
    display: inline-block;        /* 幅の計算を安定させる */
}

/* Ribbon Style for "Limited Time" */
        .ribbon {
            width: 150px;
            height: 150px;
            overflow: hidden;
            position: absolute;
            top: -10px;
            left: -10px;
            z-index: 20;
        }
        .ribbon span {
            position: absolute;
            display: block;
            width: 225px;
            padding: 15px 0;
            background-color: #e94174;
            box-shadow: 0 5px 10px rgba(0,0,0,.1);
            color: #fff;
            font: 700 16px/1 'Lato', sans-serif;
            text-shadow: 0 1px 1px rgba(0,0,0,.2);
            text-transform: uppercase;
            text-align: center;
            right: -25px;
            top: 30px;
            transform: rotate(-45deg);
        }

/* タブボタンの基本スタイルとアクティブ時の色設定 */

/* --- タブボタンの基本設定 --- */
.tab-button {
    background-color: #f9fafb; /* 非アクティブ時は薄いグレー */
    border-bottom: 4px solid #d1d5db; /* 非アクティブ時の下の線 (gray-300相当) */
    color: #6b7280; /* 非アクティブ時の文字色 (gray-500相当) */
    transition: all 0.3s ease;
}

/* ご紹介した方 (ORANGE) がアクティブな時 */
#tab-referrer-btn.active {
    background-color: #fb923c !important; /* orange-400 */
    border-color: #ea580c !important;     /* orange-600 (濃い下線) */
    color: white !important;
}

/* ご紹介された方 (LIME) がアクティブな時 */
#tab-referee-btn.active {
    background-color: #84cc16 !important; /* lime-500 */
    border-color: #65a30d !important;     /* lime-600 (濃い下線) */
    color: white !important;
}

/* ホバー時の挙動（アクティブでない時だけ色を変える） */
#tab-referrer-btn:hover:not(.active) {
    color: #fb923c;
    background-color: #fff7ed; /* ほんのりオレンジ */
}

#tab-referee-btn:hover:not(.active) {
    color: #84cc16;
    background-color: #f7fee7; /* ほんのりライム */
}

.appli_exec {
    position: fixed;
    top: 15vh;
    left: 80%;
    z-index: 200;
    background-color: rgba(16, 143, 234, 0.8);
    border-radius: 8px;
    width: 18%;
}
.appli_exec p {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 1.2em 0;
    padding: 0.8em;
    font-size: 14px;
}

.fv-aspect-fand {
    aspect-ratio: 750 / 522;
}

.sns-icon-offset{
    margin-top: -15px;
    margin-right: -15px;
}

.fv-floating-shadow {
    box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
}

/* ポイントセクションの見出し高さ調整 */
.fv-point-title {
    display: block; 
    min-height: 4rem; /* 3行程度になっても大丈夫なように少し余裕を持たせる */
    text-align: center;
    margin-bottom: 1rem;
}

/* アコーディオンの矢印の回転設定 */
/* detailsタグが開いている（open属性がある）時、中にあるsvgを180度回転させる */
details[open] summary svg {
    transform: rotate(180deg);
}

/* 矢印の動きを滑らかにするための設定 */
details summary svg {
    transition: transform 0.3s ease;
}

/* summaryの標準の矢印（黒い三角）を消す（ブラウザ対策） */
summary {
    list-style: none; /* Chrome, Safari, Firefox用 */
}
summary::-webkit-details-marker {
    display: none; /* iOS, 旧Chrome用 */
}

@media (max-width: 767px) {
    .fv-banner-text {
        /* スマホサイズ */
        font-size: 14px !important;
    }

    .fv-label-date {
        /* スマホサイズ */
        font-size: 12px !important;
        line-height: 1.2;
    }

    .fv-target-text {
        /* スマホサイズ */
        font-size: 10px !important;
    }

    .fv-note-text {
        /* スマホサイズ */
        font-size: 10px !important;
    }

    .ribbon {
        width: 100px;  /* 全体を小さく */
        height: 100px;
        top: -8px;     /* 位置を微調整 */
        left: -8px;
    }

    .ribbon span {
        width: 150px;  /* 帯の幅を短く */
        padding: 8px 0; /* 帯の太さを細く */
        font-size: 12px; /* 文字を小さく */
        top: 20px;      /* 斜めの位置を微調整 */
        right: -15px;
    }

    .fv-point-title {
        min-height: auto; /* スマホでは高さ固定を解除 */
        margin-bottom: 0.5rem;
    }
}