/* --- 全体共通の設定 --- */
body {
    margin: 0;
    padding: 0;
    font-family: 'Helvetica Neue', Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    background-color: #fdf2d8;
}

/* --- カード共通の装飾（親要素に position: relative; が必要です） --- */
.staff-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden; /* 装飾のはみ出しを防止 */
}

/* 五線譜ライン */
.sg {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: #c5cdd8;
    /* 5本の線を一気に描画 */
    box-shadow: 
        0 12px 0 #c5cdd8, 
        0 24px 0 #c5cdd8, 
        0 36px 0 #c5cdd8, 
        0 48px 0 #c5cdd8;
}

/* 各段の位置指定（カードの高さに合わせて調整してください） */
.sg:nth-child(1) { top: 60px; }
.sg:nth-child(2) { top: 180px; }
.sg:nth-child(3) { top: 300px; }

/* ト音記号 */
.clef {
    position: absolute;
    left: 8px;
    top: 35px;
    font-size: 100px;
    line-height: 1;
    color: #c5cdd8;
    opacity: .2;
    z-index: 0;
    pointer-events: none;
    user-select: none;
    transition: all 0.3s ease; /* サイズ変更を滑らかに */
}

/* --- 【重要】レスポンシブ対応（スマホ・タブレット） --- */
@media screen and (max-width: 768px) {
    /* 五線譜の感覚をスマホ用に少し詰める（必要に応じて） */
    .sg {
        opacity: 0.6; /* スマホでは背景を少し薄くして文字を優先 */
    }

    /* ト音記号をスマホの画面幅に合わせてリサイズ */
    .clef {
        font-size: 70px; /* PCの100pxから70pxへ縮小 */
        top: 38px;       /* 位置の微調整 */
        left: 5px;
    }

    /* 背景ラインの間隔がスマホで広すぎる場合はここを調整 */
    .sg:nth-child(1) { top: 50px; }
    .sg:nth-child(2) { top: 160px; }
    .sg:nth-child(3) { top: 270px; }
}

/* 極小サイズのスマホ（iPhone SEなど） */
@media screen and (max-width: 375px) {
    .clef {
        font-size: 60px;
        top: 40px;
    }
}