/* 基本リセット */
body, html {
    margin: 0;
    padding: 0;
    background-color: #222; /* 背景を暗めに設定（PC版の余白用） */
    font-family: sans-serif;
}

/* 表示切り替え */
.pc-only { display: block; }
.sp-only { display: none; }

/* PC版のコンテナ幅設定 */
.pc-only {
    max-width: 1000px; /* PC版画像の横幅に合わせて調整してください */
    margin: 0 auto;
    background-color: #fff;
}

/* 基準点と画像の挙動 */
.relative-box {
    position: relative;
    line-height: 0; /* 画像下の謎の隙間を消す */
}
.relative-box img {
    display: block;
    width: 100%;
    height: auto;
}

/* =========================================
   透明ボタンの共通設定と個別配置
========================================= */
.btn-transparent {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    /* 本番用：赤色を非表示（透明）にしています */
    /* background-color: rgba(255, 0, 0, 0.4); */
}

/* --- PC版ボタン位置 --- */
/* 1箇所目 */
.pc-tel-1 { top: 10%; left: 15.3%; width: 34%; height: 1.3%; }
.pc-line-1 { top: 10%; left: 50%; width: 34%; height: 1.3%; }

/* 2箇所目 */
.pc-tel-2 { top: 31%; left: 16%; width: 33%; height: 1.2%; }
.pc-line-2 { top: 30.9%; left: 51%; width: 33%; height: 1.2%; }

/* 3箇所目 */
.pc-tel-3 { top: 52%; left: 16%; width: 33%; height: 1%; }
.pc-line-3 { top: 52%; left: 52%; width: 30%; height: 1.1%; }

/* 4箇所目 */
.pc-tel-4 { top: 81.3%; left: 18%; width: 30%; height: 1%; }
.pc-line-4 { top: 81.3%; left: 50%; width: 33%; height: 1%; }


/* --- スマホ版（SP）対応 --- */
@media screen and (max-width: 768px) {
    .pc-only { display: none; }
    .sp-only { display: block; }
    
    body {
        background-color: #fff;
        padding-bottom: 25vw; /* 追従フッターがコンテンツに被らないよう余白を確保 */
    }

    /* =========================================
       SP版 前半（SP1）のボタン位置
    ========================================= */
    /* ① FV直下のボタン */
    .sp-tel-1-1 { top: 14%; left: 5%; width: 90%; height: 1.8%; }
    .sp-line-1-1 { top: 16%; left: 6%; width: 90%; height: 1.8%; }

    /* ② 中盤のボタン */
    .sp-tel-1-2 { top: 45.3%; left: 5%; width: 90%; height: 1.8%; }
    .sp-line-1-2 { top: 47.2%; left: 5%; width: 90%; height: 1.8%; }

    /* ③ ご利用の流れ部分のボタン */
    .sp-tel-1-3 { top: 80.8%; left: 5%; width: 90%; height: 1.8%; }
    .sp-line-1-3 { top: 82.8%; left: 5%; width: 90%; height: 1.4%; }

    /* =========================================
       SP版 後半（SP2）のボタン位置
    ========================================= */
    .sp-tel-2 { top: 43%; left: 5%; width: 90%; height: 3%; }
    .sp-line-2 { top: 47%; left: 5%; width: 90%; height: 3%; }

    /* --- 追従フッター --- */
    .sticky-footer {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 100;
        background-color: transparent;
    }
    
    .footer-wrapper {
        max-width: 768px;
        margin: 0 auto;
    }

    .footer-tel { top: 45%; left: 2%; width: 47%; height: 45%; }
    .footer-line { top: 45%; left: 51%; width: 47%; height: 45%; }

    /* --- 現在時刻の上書き用ボックス --- */
    #dynamic-time-box {
        position: absolute;
        top: 13%;      
        left: 2%;      
        width: 16%;    
        height: 25%;   
        background-color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 5;
    }

    #current-time {
        font-size: 4.5vw; 
        font-weight: bold;
        color: #000;
        letter-spacing: 1px;
    }
}