/* H2重ね文字見出し専用CSS */

/* 共通スタイル */
h2.h-yellow,
h2.h-white,
h2.h-gray {
    position: relative;
    display: inline-block;
    font-size: 36px;
    font-weight: bold;
    color: #333;
    margin: 20px 0;
    font-family: 'Noto Sans JP', Arial, sans-serif;
}

/* 背景文字（span）の共通スタイル */
h2.h-yellow span,
h2.h-white span,
h2.h-gray span {
    position: absolute;
    top: -55px;
    left: -80px;
    z-index: -1;
    font-size: 75px;
    font-weight: 900;
    letter-spacing: 2px;
    transform: rotate(-8deg);
    pointer-events: none;
}

/* 前面テキストのスタイル */
h2.h-yellow,
h2.h-white,
h2.h-gray {
    position: relative;
    z-index: 2;
}

/* 黄色グラデーション */
h2.h-yellow span {
    background: linear-gradient(90deg, #FFF176, #FFF9C4);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 白ベタ */
h2.h-white span {
    color: #ffffff;
}

/* 白グラデーション */
h2.h-gray span {
    background: linear-gradient(90deg, #ffffff, rgba(255, 255, 255, 0.3));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

/* レスポンシブ対応 */

/* タブレット用 (768px以下) */
@media (max-width: 768px) {
    h2.h-yellow,
    h2.h-white,
    h2.h-gray {
        font-size: 28px;
    }
    
    h2.h-yellow span,
    h2.h-white span,
    h2.h-gray span {
        font-size: 60px;
        top: -45px;
        left: -60px;
        letter-spacing: 1px;
    }
}

/* スマホ用 (480px以下) */
@media (max-width: 480px) {
    h2.h-yellow,
    h2.h-white,
    h2.h-gray {
        font-size: 22px;
        margin: 15px 0;
    }
    
    h2.h-yellow span,
    h2.h-white span,
    h2.h-gray span {
        font-size: 45px;
        top: -35px;
        left: -45px;
        letter-spacing: 0px;
    }
}