/* ===== HERO タイトル（PC 基本） ===== */
.hero-title,
.page-featured-title {
    margin-bottom: 80px !important; /* ←F12で調整した値に近い */
    font-size: 2.2rem !important;
    font-weight: 700 !important;
    color: #fff !important;
    text-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
    position: relative;
    z-index: 5;
    line-height: 1.2 !important;
    transform: translateY(10px); /* ←位置調整の決め手 */
}

/* ===== スマホ（〜767px） ===== */
@media (max-width: 767px) {
    .hero-title,
    .page-featured-title {
        margin-bottom: 70px !important;
        font-size: 1.6rem !important;
        transform: translateY(0); /* モバイルでは補正を弱く */
    }
}

/* ===== タブレット（768px〜1023px） ===== */
@media (min-width: 768px) and (max-width: 1023px) {
    .hero-title,
    .page-featured-title {
        margin-bottom: 70px !important;
        font-size: 1.8rem !important;
        transform: translateY(5px);
    }

    .eyecatch-hero,
    .page-featured-header {
        height: 180px !important;
    }
}

/* ===== 黒オーバーレイ ===== */
.eyecatch-hero::after,
.page-featured-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 1;
}